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}
    />
  );
}

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

Вы можете создать функцию, которая будет async, и вызвать там API. ошибка говорит обо всем. вы пытаетесь получить доступ к img1 собственности undefined.

DecPK 17.02.2023 02:49

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

Joshua 17.02.2023 02:53

@DecPK, когда я запускаю его в console.info, он имеет правильный вывод, который должен быть

c321321sda 17.02.2023 03:35

@konekoya Спасибо, вы можете опубликовать это как ответ, чтобы я мог отметить его правильно

c321321sda 17.02.2023 03:43
Типы данных JavaScript
Типы данных JavaScript
В JavaScript существует несколько типов данных, включая примитивные типы данных и ссылочные типы данных. Вот краткое объяснение различных типов данных...
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик
CSS Flex: что должен знать каждый разработчик Модуль flexbox, также известный как гибкий модуль разметки box, помогает эффективно проектировать и...
Введение в раздел &quot;Заголовок&quot; в HTML
Введение в раздел "Заголовок" в HTML
Говорят, что лучшее о человеке можно увидеть только изнутри, и это относится и к веб-страницам HTML! Причина, по которой некоторые веб-страницы не...
Как React Helmet спасает меня при разделении файлов CSS?
Как React Helmet спасает меня при разделении файлов CSS?
Многие новички могут столкнуться с проблемой, когда одна страница с CSS наследует свойства от другой страницы с другим CSS. У меня было много проблем,...
Потяните за рычаг выброса энергососущих проектов
Потяните за рычаг выброса энергососущих проектов
На этой неделе моя команда отменила проект, над которым я работал. Неделя усилий пошла насмарку.
Руководство для начинающих по веб-разработке: HTML, CSS и JavaScript.
Руководство для начинающих по веб-разработке: HTML, CSS и JavaScript.
Добро пожаловать, мои коллеги по интернету, в захватывающий мир веб-разработки! Дорогие мои начинающие, я здесь, чтобы провести вас через основы HTML,...
0
4
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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}
    />
  );
}

Другие вопросы по теме