javascript - 迭代 JSX 中对象内部的数组给出 undefined

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

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

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

Answer 1

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

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

constructor() {
  super();

  this.state = { project: { comments: [] } };
}

或者，您可以在调用 .map 时直接给出默认值:

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