在 JSX 中迭代对象内部的数组给出未定义

Question

>我正在从我的API获取数据：

fetch('/api/p/' + project_id).then(res => res.json())
.then((project) => {
console.log(project)
this.setState({ project })
}
);

项目结构是这样的：

{
name: "project1",
comments: ["com1", "com2"]
}

现在在我的返回函数中，我需要遍历所有注释并谨慎地呈现它们在不同行上的每个注释，所以我使用了以下代码：

this.state.project.comments.map((comment) => {
return (
<p><i class="fas fa-chevron-right"></i> { comment } </p>
);
});

我收到此错误：

TypeError: Cannot read property 'map' of undefined

我尝试了地图或forEach和for。 而且我无法获得它的长度，因为我得到同样的错误。

但是如果我输入this.state.project.comments我会将所有元素放在一行中，没有空格，就像这样comment1comment2comment3

Answer 1

您正在尝试.map一个undefined的值。 这可能是因为在你fetch时没有定义this.state.project.comments，但 React 仍在尝试进行初始渲染。

确保在某处设置初始状态，例如

constructor() {
super();
this.state = { project: { comments: [] } };
}

或者，您可以在调用.map时在此处给出默认值：

(this.state.project.comments || []).map((comment) => {

Answer 2

我认为你在错误的这一行上映射：this.state.comments.map((comment) => {应该是this.state.project.comments.map((comment) => {

Answer 3

我从您的代码中看到的是，您正在映射"注释"，但您正在更新项目，并且您也必须喜欢

this.setState({
project: res.data
})

以及用于映射数据

this.state.project.map((project)=>{
return (
<p><i class="fas fa-chevron-right"></i> { project.comments } </p>
);
})