Below is the code making API call
const listJobs = () =>{
axios.get( `${process.env.REACT_APP_API}/search-projects`,
{params: {category
}
})
.then(response => {
console.log('LOG SUCCESS --', response.data);
const results = response.data;
setValues({...values, results: results});
console.log('My State Data', results);
})
}
这是为了显示表上的数据
const{results}=值；
{ results.map(({id, title, description, budget}, index ) => {
return (
<tr key={id}>
<td>{id}</td>
<td>{title}</td>
<td>{description}</td>
<td>{budget}</td>
</tr>
);
})}
我猜这里的问题是，在异步axios调用返回之前，results将是undefined，等等，在前几次尝试呈现组件时，它试图对undefined调用.map()，这将无法工作。
您可以在jsx中添加某种类型的保护，例如:
{ results && results.map(...) }
你之所以
或者首先将results初始化为一个空数组，并在解析后重新分配给axios调用的结果。
Axios发出异步请求:您需要从useEffect钩子（或componentDidMount）调用它，如下所示:
useEffect(() => {
axios.get(`${process.env.REACT_APP_API}/search-projects`).then(res => console.log(res))
})
另一个问题是您没有检查请求是否完成以及状态是否更新
{
results &&
results.map(({ id, title, description, budget }, index) => {
return (
<tr key={id}>
<td>{id}</td>
<td>{title}</td>
<td>{description}</td>
<td>{budget}</td>
</tr>
)
})
}
最后，请求必须是数组才能使用array.prototype.map（）函数。
