Блог

Главная - Вопросы по программированию - Ошибка: Объекты недопустимы в качестве дочернего элемента React (в пределах Promise.all)

Ошибка: Объекты недопустимы в качестве дочернего элемента React (в пределах Promise.all)

#javascript #reactjs #promise #axios #use-effect

Вопрос:

Я создаю проект React practice, и я все еще сталкиваюсь с такого рода ошибками (объекты недопустимы как дочерние объекты React). Подробнее на скриншоте ниже.

Выброшенная ошибка

Вы также можете увидеть проблемную часть кода на этом скриншоте.

Некоторое объяснение: Этот фрагмент кода является частью внутри useEffect (это содержимое useEffect выполняется только в том случае, если fixturesIds оно не определено). Затем некоторые запросы get помещаются в массив predictionList , и они решаются вместе Promise.all . Обещать.все возвращает массив, который я сопоставляю для получения необходимых данных. prediction.value.data Это все () задается как состояние (). setFixturesDetails

Prediction.value.data похоже на: [{..}, {..}, {..}, {..}]

Это сработало очень хорошо, когда я вошел в консоль.

Но когда я попытался использовать этот массив объектов в качестве реквизита в компоненте (см. Ниже) …

 return (
    <div className='App'>
      {fixturesDetails.length > 0 ? (
        fixturesDetails.map((details) => (
          <Prediction
            homeTeam={details.teams.home.name}
            awayTeam={details.teams.away.name}
            winner={details.predictions.winner}
          />
        ))
      ) : (
        <h2>Loading</h2>
      )}
    </div>

…он начал выдавать упомянутую ошибку.

Загрузка отображается нормально, и она завершается сбоем, когда заданы значения fixturesDetails ( fixturesDetails.length > 0 верно),

поэтому вместо того, чтобы показывать компонент прогнозирования, он показывает эту ошибку.

Есть идеи, почему он выдает эту ошибку? Я много исследовал, но до сих пор не могу в этом разобраться.

Спасибо!

Комментарии:

1. что вы получаете, когда входите в консоль fixturesDetails.map((details) => (<Component/>)) . Можете ли вы также показать свой код компонента прогнозирования

2. Похоже, проблема с реализацией Prediction компонента

Ответ №1:

Ну, я только что понял это.

Проблема в том, что в синтаксисе JSX невозможно использовать объект в качестве реквизита.

Я зарегистрировал все свои реквизиты в консоли и обнаружил, что один из моих реквизитов действительно является объектом.

Решение довольно ясное, просто выберите правильное свойство внутри объекта. Если существует сложный API с вложенными объектами, может быть очень легко не заметить, что вы на самом деле возвращаете объект в prop.

Может быть, когда-нибудь это кому-нибудь поможет:)

Метки: