Блог

Главная - Вопросы по программированию - Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {задание}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив

Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {задание}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив

#json #reactjs #typescript #async-await #axios

#json #reactjs #машинописный текст #async-await #аксиос

Вопрос:

Использование axios для извлечения данных из API, а затем попытка сопоставить значения и отобразить их в другом компоненте.

Приложение.tsx

 import React, { useState, useEffect } from 'react';
import JobBoardComponent from './components/JobBoardComponent';
import axios from 'axios';

function App(): JSX.Element {

  const[jobs, setJobs] = useState<any>([]); 

  useEffect((): void => {
     const fetchJobs = async () => {
        const res = await axios('http://localhost:5000/jobs');
        setJobs(res.data);
     };
     fetchJobs();
  }, []);

  
  return (
    <div className="App">
     {jobs.map((job: any) => <JobBoardComponent job={job} key={job.id} />)}
    </div>
  );
}

export default App;

JobBoardComponent.tsx

 import React from 'react'

function JobBoardComponent( job: any, key: any){
    return (
        <div>
           <h1>{ job }</h1>
        </div>
    )
}

export default JobBoardComponent;

Похоже, что API работает.

Я следую этому руководству https://www.youtube.com/watch?v=JZQ8m08cbF0 но я решил создать свой собственный API, и теперь он не работает.

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

1. Какова структура jobs переменной с отслеживанием состояния?

2. Я не знаю, что вы подразумеваете под структурой заданий с отслеживанием состояния, но если вы имеете в виду структуру данных json, то структура будет такой …. { «id»: 1, «company»: «Photosnap», «logo»: «./images/photosnap.svg», «new»: true, «featured»: true, «должность»: «Старший разработчик интерфейса», «роль»: «Интерфейс», «уровень»: «Старший», «postedAt»: «1 день назад», «контракт»: «Полный рабочий день», «местоположение»: «Только для США», «языки»: [«HTML», «CSS», «JavaScript»], «инструменты»: [] },

3. вы неправильно передаете реквизиты, JobBoardComponent( {job: any, key: any})

Ответ №1:

Пожалуйста, не используйте, any если вы не находитесь в процессе переноса проекта js в ts (или вам ДЕЙСТВИТЕЛЬНО все равно, какого типа будет переменная, даже тогда вам все равно следует рассмотреть возможность использования неизвестного типа.)

Что касается вашей проблемы, на вашем месте, для быстрого и грязного способа отображения «неизвестных» данных я бы сделал что-то вроде этого (или просто console.log это, если данные слишком большие).:

     ...
    <h1>{ JSON.stringify(job) }</h1>
    ...

И я предполагаю, что из ошибки, которую вы только что упомянули (и из приведенного выше сценария, который оправдает мое предположение, если вы его включите), job это вложенный объект, который не является допустимыми данными для отображения в React. Вероятно, вам следует деструктировать вашу job переменную внутри JobBoardComponent .

Опять же, вы можете избежать подобных ошибок, если присвоите своей job переменной значение, не являющееся any типом, linter предупредит вас, если вы назначаете неправильные типы, что невозможно при использовании any .

Метки: ,