javascript - 遍历JSX中对象内部的数组，给出未定义

我正在从API中获取数据：

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

项目结构如下：

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

现在，在我的return函数中，我需要遍历所有注释，并在不同的行上无条件地渲染每个注释，因此我使用了以下代码：

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

最佳答案

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

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

constructor() {
  super();

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

另外，您可以在调用.map时在此处提供默认值：

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

关于javascript - 遍历JSX中对象内部的数组，给出未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59871285/