Uncaught (в обещании) TypeError: невозможно прочитать свойства неопределенного (чтение «img1»)

Я на react.js

async function Banners(props) {
  const response = await axios.get(`${apiUrl}/assets/get`);

  return (
    <MainContent
      text = {response.text}
      img1 = {props.img1 ? props.img1 : response.data.img1}
      img2 = {props.img2 ? props.img2 : response.data.img2}
    />
  );
}

ошибка возникает только тогда, когда есть "асинхронный"

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.


52
1

Ответ:

Решено

Вам нужно обернуть асинхронный вызов API в обработчик useEffect и сохранить данные в состоянии, чтобы это состояние можно было использовать в функции рендеринга. Вот пример кода без тестирования:

function Banners(props) {
  const [response, setResponse] = useState([]);

  const fetchData = async () => {
    const response = await axios.get(`${apiUrl}/assets/get`);
    setResponse(response);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <MainContent
      text = {response.text}
      img1 = {props.img1 ? props.img1 : response.data.img1}
      img2 = {props.img2 ? props.img2 : response.data.img2}
    />
  );
}