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

Question

[IDONTSUDO]

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

Скрин 1.


приходит 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.



Здесь же, я наоборот получаю. 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. Я делал лоадер, но это все равно выглядит как ад эпилептика.

Answer 1

[Олег Гамега]

как то так

<img src={`http://localhost:8080/user/photo/${user._id}?`} onerror= {DefaultProfile} alt={user.name}/>

Comments

[IDONTSUDO]

Увы до этого так обрабатывал. Было еще хуже.

[IDONTSUDO]

он сначала грузил дефолтное изобраажение, потом аватар. И это было очень сильно заметно.

[IDONTSUDO]

А нет, у меня была функция oNerror заместо, onerror. И из за этого получается была проблема.

Answer 2

[beDenz]

Все дело в том, что когда страница загружается запрос на бэк еще не отработан, соответственно стейт у вас пустой. Поэтому у вас всегда будет показывать сначала. По хорошему, когда происходит рендер картинки стейт должен быть уже готов. Если ответ с сервера приходит быстро, то может лучше пусть будет 1-2 секундная задержка вместо того что у вас сейчас происходит.
И у вас условное выражение очень странное, вы два раза на одно и тоже проверяете.

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

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

Comments

[IDONTSUDO]

Redux синхронен, интерфейс очень сложный. Клиент зависнет, наверное. Во время ответа на главный вопрос. Есть ли у юзера аватарка.

user.avatar ? <блок если true> : <блок если false>
При таком варианте. Рендеринг происходит не так как мне надо.

[IDONTSUDO]

я попробую поставить, на сет тайм аут. Но однажды это мне не помогло. Я думаю, проблема в какой то фундаментльной фиче реакта.

[beDenz]

IDONTSUDO, если я правильно понимаю то изначально у вас стейт инициализируется пустым массивом. После запроса на бэк вы получаете уже массив объектов. Так делайте сначала проверку чтобы массив не был пустым, а потому же рендер компонента.