对象作为 React 子对象无效（找到：带有键 {job} 的对象）。如果您打算渲染一组孩子，请改用数组答案

【问题标题】：Objects are not valid as a React child (found: object with keys {job}). If you meant to render a collection of children, use an array instead对象作为 React 子对象无效（找到：带有键 {job} 的对象）。如果您打算渲染一组孩子，请改用数组
【发布时间】：2021-03-11 19:27:49
【问题描述】：

使用 axios 从 api 获取数据，然后尝试映射值并将它们显示在不同的组件中。

App.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，但现在它不起作用。

【问题讨论】：

有状态的jobs变量的结构是什么？
我不知道你所说的有状态作业结构是什么意思，但如果你指的是 json 数据的结构，那么结构是这样的 ....{ "id": 1, "company": " Photosnap”，“logo”：“./images/photosnap.svg”，“new”：true，“featured”：true，“position”：“高级前端开发人员”，“role”：“Frontend”，“level” : "Senior", "postedAt": "1d ago", "contract": "Full Time", "location": "USA Only", "languages": ["HTML", "CSS", "JavaScript"], "工具": [] },
你没有正确传递道具，JobBoardComponent( {job: any, key: any})

标签： json reactjs typescript async-await axios

【解决方案1】：

请不要使用anyunless you are in the process of migrating a js project to ts（或者你真的不在乎变量是什么类型，即使那样你仍然应该考虑使用unknown类型。）

至于你的问题，如果我是你，为了显示“未知”数据的快速而肮脏的方式，我会做这样的事情（或者如果数据太大，就console.log它）：

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

我猜，从你刚才提到的错误（以及从上面的脚本中，如果你包含它会证明我的猜测是正确的），job 是一个嵌套的object，它不是在 React 中显示的有效数据.也许你应该在JobBoardComponent 中解构你的job 变量。

同样，如果您将job 变量指定为非any 类型，则可以避免此类错误，如果您分配了错误的类型，linter 会警告您，您可以这样做' t 使用any时。

【讨论】：