IDONTSUDO
@IDONTSUDO
ЧСВ программистов идет в комплекте с первой IDE.

React как замедлить реактивность при рендеринге обьекта?

Я столкнулся с проблемой рендеринга, пользовательских фото.
У меня есть 2 ситуации которые показывают проблему.

Скрин 1.
5db6aa9508b1d602316956.png

приходит array с бэка с такими значениями

email:"",
name:"",
avatar:boolean


Я делаю метод map и на основании avatar делаю запрос на получение аватарки пользователя с бэка.
{user.avatar === true ?(
                   <img
                   className="card-img-top"
                   src={`http://localhost:8080/user/photo/${user._id}?`}
                   alt={user.name}
                   style={{ height: "50px", width: "50px" }}
                   
                 />    
                  ):(      
                  <img
                  className="card-img-top"
                  src={`${DefaultProfile}`}
                  style={{ height: "50px", width: "50px" }}
                />          
                  )}


Все это умещается вот в такое тернарное выражение. И работает как часа.

Скрин 2.

5db6abc091b54577152240.png

Здесь же, я наоборот получаю. Object user у него почти такие же свойства.

//выдержка из кода
  const { redirectToSignin, user } = this.state;
   return (
 {user.avatar === true ? (
                <>
                 <img
                   className="card-img-top"
                   src={`http://localhost:8080/user/photo/${user._id}?`}
                   alt={user.name}
                   style={{ height: "10em", width: "10em" }}
                   />
                </>
              ):(
               ""
              )}
{user.avatar === false ? (
                <>
                 <img
                   className="card-img-top"
                   src={DefaultProfile}
                   alt={user.name}
                   style={{ height: "10em", width: "10em" }}
                   />
                </>
              ):(
               ""
              )}


Проблема в том, что он сначала рендерит дефолтный аватар. Который я прописал в коде, на случай отсутствия у пользователя фотографии. А затем, он рендерит его нормальный аватар. Насколько я понимаю, проблема в том что React работает со State асинхронно. А с методом map, синхронно.


Как решить эту проблему? Кроме перевода все в массив.


P.S. Я делал лоадер, но это все равно выглядит как ад эпилептика.
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
gadfi
@gadfi
https://gamega.org
как то так
<img src={`http://localhost:8080/user/photo/${user._id}?`} onerror= {DefaultProfile} alt={user.name}/>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@beDenz
Все дело в том, что когда страница загружается запрос на бэк еще не отработан, соответственно стейт у вас пустой. Поэтому у вас всегда будет показывать сначала. По хорошему, когда происходит рендер картинки стейт должен быть уже готов. Если ответ с сервера приходит быстро, то может лучше пусть будет 1-2 секундная задержка вместо того что у вас сейчас происходит.
И у вас условное выражение очень странное, вы два раза на одно и тоже проверяете.

user.avatar ? <блок если true> : <блок если false>

Короче, проще и понятнее. можно в отдельный компонент вынести. И изучайте Redux и Context полезно будет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы