React：如何传递对象内的JobsList数组并获取正确长度？

问题根源 #

你传递给CareerList的jobs是外层长度为1的数组（仅包含单个用户对象），而非对象内部的JobsList数组，因此打印长度为1。

方法一：父组件直接传递目标数组 #

修改父组件传参逻辑，直接提取用户对象里的JobsList数组：

// 父组件代码
// 注意：避免用JSON作为变量名，防止和全局JSON对象冲突
const [userData] = useState([
  {
    "Name":"Ben Davies",
    "JobsList":[
       {"Company":"Company1","Date":"01/01/01"},
       {"Company":"Company2","Date":"01/01/01"},
       {"Company":"Company3","Date":"01/01/01"}
    ]
 }
]);

return(
  <CareerList  
    jobs={userData[0].JobsList} // 直接传递JobsList数组
  />
);

此时子组件中props.jobs即为长度为3的目标数组：

const CareerList = (props) => {
  const allJobs = props.jobs;
  console.log(allJobs.length); // 输出3
}

方法二：子组件适配多用户场景 #

如果外层数组可能包含多个用户数据，子组件可以用flatMap合并所有用户的工作列表：

const CareerList = (props) => {
  // 遍历每个用户，提取JobsList并合并成一个数组
  const allJobs = props.jobs.flatMap(user => user.JobsList);
  console.log(allJobs.length); // 单个用户时输出3，多用户时为所有工作数量总和
}

这种方式更灵活，能适配未来数据结构的扩展。

内容的提问来源于stack exchange，提问作者Ben Davies