ReactJS и Javascript: Получение "Ошибка: Объекты недопустимы в качестве дочернего элемента React" при попытке установить объекты JSON в состояние

#javascript #json #reactjs

Вопрос:

Обзор: У меня есть два компонента: ComponentA и ComponentB, я хотел бы отправить запрос POST в свой API и сохранить возвращенную строку JSON в хук useState, а затем передать это состояние в ComponentB. В компоненте B я хотел бы использовать функцию .map() для перебора содержимого реквизита.

Структура данных JSON ответа API: [{object: 1, name: 'bob'},{object: 2, name: 'joe'}...]

Вот мое определение крючка состояния:

 const [data, setData] = useState([]);

Мой вызов API:

   const handleSubmit = () => {
    console.log("Function Called");
    fetch("/post", {
      method: "POST",
      mode: "cors",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formik.values),
    })
      .then((response) => response.json())
      .then((res) => {
        console.log(typeof res);
        setData(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

и моя функция ComponentB .map()

       <tbody>
        {props.responses.length > 0 ? (
          props.responses.map((response) => (
            <tr
              class={
                tableRow === "" ? (tableRow = "table-primary") : (tableRow = "")
              }
            >
              <td>{response.object}</td>
              <td>{response.name}</td>
            </tr>
          ))
        ) : (
          <tr></tr>
        )}
      </tbody>

всякий раз, когда я выполняю вызов API, я получаю эту ошибку:

 Error: Objects are not valid as a React child (found: object with keys {object, name}). If you meant to render a collection of children, use an array instead.

можно ли установить ответ в состоянии как объект JSON и передать его в ComponentB? Если да, то что я делаю не так?

Или мне нужно передать его как строку, а затем JSON.parse() в компоненте B? (единственная проблема с этим заключается в том, что JS выдает ошибку cors, почему это так?

1. Многое из вашего описания не совпадает. Сначала вы упоминаете , что используете названное состояние data , но затем вы звоните setPrediction . Затем вы сказали , что API должен возвращать что-то вроде [{object: 1, name: 'bob'}, ...] , но вы обращаетесь response.day , response.time . Вы можете это прояснить?

2. Вы пытаетесь использовать карту для объекта вместо массива. Попробуй Object.entries(object).map( [a, b] => codeHere)

3. @MatthewKwong извините за то, что попытался немного изменить код, так что это не совсем то, что у меня есть в моем, но отличный улов, я изменил его!

4. @JoelHager, это повлияет на него только после того, как я установлю состояние и передам данные в ComponentB, верно?

5. Прочитайте ошибку. Вы не можете сопоставить объект с помощью .map(). Это приведет к ошибке. Используйте Object.entries(реквизит.ответы) и дайте мне знать, что произойдет.

Ответ №1:

Ошибка говорит вам, что вы пытаетесь поместить весь объект JS в разметку JSX, вы не можете этого сделать. Просто посмотрите, что вы получаете от API и как вы пытаетесь это отобразить.

Ответ №2:

В итоге я переместил компонент B внутрь компонента A. Я полагаю, что причина в том, что, когда браузер запрашивает данные у серверной части, браузер хочет сохранить данные в своем домене, поэтому он выдает ошибку cors при передаче данных из браузера в компонент B, который будет находиться внутри виртуального DOM, еще не отображенный в браузере. Таким образом, это не ошибка, вызванная взаимодействием компонентов, а взаимодействием браузера и сервера ReactJS. Для этого нужно пройти не весь штат, а вместо этого пройти отдельные реквизиты.