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

Posted 2023-02-22

【中文标题】对象作为 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)

【参考方案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时。