Тег IMG не отображает данное изображение в reactJS

Question

У меня есть компонент профиля пользователя в моем приложении reactJS, и я хочу отображать изображение профиля пользователя при загрузке компонента. Я использую nodeJS Express как BE и PostgreSQL как DB. Вот что я пытаюсь сделать

const [img,setImg] = useState()
let user : any = useSelector((state : any) => state.singleUser)
let {avatar} = user


 useEffect((): void => {
      axios
    .get(`http://localhost:4000/getUser/${match.params.userId}`)
    .then((users) => {
      dispatch(actions.getUser(users.data))
    })
    .catch((err) => {
      console.log('--------err', err);
    })
},[])

После этого я установил Img в img следующим образом:

useEffect (() : void => {
setImg(avatar)
console.log('--------img', img);
  })

Когда я console.log(img) я получаю путь img, как это uploads/avatar-1594717135245.jpeg.gif

Вот мой тег img: <img ref={fileRef} src={img} width={'400'} alt={'picture'}/> он не показывает ошибок в консоли, но проблема в том, что img отображается на секунду, а затем исчезает. Любые предложения, почему и как я могу это исправить?

Answer 1

Попробуйте переместить setImage (users.data.avatar) сразу после отправки, у вас там уже есть информация об аватаре. Удалите секунды useEffect, у вас будет меньше движущихся частей для отладки проблемы.