json - 对象作为 React 子项无效(找到 : object with keys {job}). 如果您打算渲染子项集合，请改用数组

Question

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

Answer 1

请不要使用 any unless you are in the process of migrating a js project to ts (或者你 真的 不在乎变量是什么类型，即使那样你仍然应该考虑使用 unknown 类型代替。)
至于你的问题，如果我是你，对于显示“未知”数据的快速和肮脏的方式，我会做这样的事情(或者只是 console.log 如果数据太大):

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

我猜，从你刚才提到的错误(以及从上面的脚本中，如果你包含它，我的猜测是正确的)， job是嵌套的 object ，这不是在 React 中显示的有效数据。也许你应该解构你的 job内部变量 JobBoardComponent .
再次，您可以 避免此类错误 如果你给你的 job变量 a 非 any如果您分配了错误的类型，linter 会警告您，而在使用 any 时不能这样做.