反应：不确定为什么我不能在这个数组上运行 Array.map()

Question

我从后端API请求假公司信息，该后端API返回公司名称，公司描述和嵌套在作业数组中的对象。

我正在尝试映射作业数组以在页面上显示它们。但是当我这样做的时候，我遇到了一个错误，上面写着&;TypeError: jobs。Map不是函数

我敢打赌这是一个简单的解决方案，但我已经在这个问题上花了太长时间了，这是一个我不止一次遇到的问题，所以很高兴理解为什么会发生这种情况。

相关代码如下:

import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';
import JobCard from "../components/JobCard";
import JoblyApi from '../api';
export default function CompanyDetails(){
const [company, setCompany] = useState([]);
const [jobs, setJobs] = useState([]);
const {handle} = useParams();
useEffect(() => {
async function fetchCompanyDetails() {
const res = await JoblyApi.getCompany(handle);
setCompany(res);
setJobs(res.jobs);
}
fetchCompanyDetails();
}, []);
return(
<>
<h1>{company.name}</h1>
<p>{company.description}</p>
{jobs.map((job) => <JobCard key={job.id} jobs={job} isTitleHidden={true} />)}
</>
)
}

下面是错误的截图:

我已经测试了调用API的辅助函数，它们工作正常。我还做了一些console.log()，以确保我正在获得我所期望的工作数组。

Array.isArray的结果

Answer 1

确保jobs数组不为空。其他高级数组方法只适用于非空数组

{jobs.length > 0 && jobs.map((job) => <JobCard key={job.id} jobs={job} isTitleHidden={true} />)}