大佬教程收集整理的这篇文章主要介绍了错误：对象作为 React 子对象无效。获取对象的对象而不是对象数组，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我对 React 还很陌生，我正在尝试从我的 Jobly 后端获取数据。在我的代码中，我将 company 设置为从后端接收的数据，并且 company.jobs 被视为一组对象。但是，当我尝试将作业设置为映射的 company.jobs 数组时，它变成了对象的对象，从而导致错误。根据我的理解，company.jobs.map() 应该返回一个数据数组，而不是一个对象？
这是提取数据和设置作业的代码：
let [jobs,setJobs] = useState([]);
const company = await JoblyAPI.getCompany(handle);
setJobs(jobs = company.jobs.map(j => (
<JobCard key={j.ID}
Title={j.Title}
salary={j.salary}
equity={j.equity}/>
)));
JoblyAPI.getCompany(handle) 返回的数据是：
{
"company": {
"handle": "anderson-arias-morrow","name": "Anderson,Arias and Morrow","description": "Somebody program how I. Face give away discussion vIEw act insIDe. Your official relationship administration here.","numEmployees": 245,"logoUrl": "/logos/logo3.png","jobs": [
{
"ID": 7,"Title": "Technical brewer","salary": 157000,"equity": "0"
},{
"ID": 18,"Title": "Embryologist,clinical","salary": 138000,...(more jobs)
这里有一些事情需要稍微调整一下。
useEffect 挂钩。假设您只需要在初始组件渲染时运行它一次，您可以使用一个空的依赖项数组。useEffect(() => {
// API call here
},[]);
请注意，如果您的效果依赖于任何变量（例如，如果您希望它每次 handle 更新时都运行），您可以在依赖项数组中提供它。以下效果将在初始渲染和每次 handle 更改时运行。
useEffect(() => {
// API call here
},[handle]);
JobCard 组件的数组，而只是您返回的数据。您可以稍后在整个组件的 return 中返回实际的 JSX。您的最终组件代码可能如下所示：
import { useState,useEffect } from "react";
function MyComponent() {
let [jobs,setJobs] = useState([]);
useEffect(() => {
async function getJobs() {
const company = await JoblyApi.getCompany(handle);
setJobs(company.jobs);
}
getJobs();
},[]);
return jobs.map((j) => (
<JobCard key={j.id} title={j.title} salary={j.salary} equity={j.equity} />
));
}
您设置状态的方式略有错误。您的州界线应该是：
setJobs(company.jobs.map(j => (
没有 jobs = 部分。
以上是大佬教程为你收集整理的错误：对象作为 React 子对象无效。获取对象的对象而不是对象数组全部内容，希望文章能够帮你解决错误：对象作为 React 子对象无效。获取对象的对象而不是对象数组所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。