错误：无法读取未定义 React 的属性'map'.JS

Question

我遵循react js教程，我一直遇到这个问题

import React from "react";
import NewsCard from "../NewsCard/NewsCard";
const NewsCards = ({ articles }) => {
return (
<div>
{articles.map((article, i) => {
<NewsCard />;
})}
</div>
);
};
export default NewsCards;

Answer 1

似乎你的文章没有默认值[]。您可以按如下方式进行更改。在使用map函数时，应该给出key属性

const NewsCards = ({ articles }) => {
const data = articles ? articles : []
return (
<div>
{data.map((article, i) => {
<NewsCard key={article.id}/>;
})}
</div>
);
};

Answer 2

当您尝试映射它时，可能没有初始化文章。试试这个:

{articles?.map((article, i) => {
<NewsCard />;
})}

或

{articles && articles.map((article, i) => {
<NewsCard />;
})}
</div>

这样你首先要确定文章是否存在

Answer 3

这意味着文章的道具是未定义的。

有几种方法可以解决这个问题。第一种也是最简单的方法是实现以下逻辑:

{articles?.length ? articles.map((article, i) => <NewsCard />) : "There are no articles here."}

解决这个问题的另一种方法是实现Reactproptypes-你可以在这里阅读。

第三和最难的"(但可能是最好的)解决这个问题的方法是使用静态类型检查工具。我想到了Flow，但你也可以使用TypeScript。

Answer 4

如果您仍然需要帮助，就像前面的答案所说的那样，请确保使用&&操作符初始化/定义articles来进行检查。此外，根据您编写的内容，map方法返回undefined，因为您指定了一个函数体(使用函数体括号符号{})而没有return语句。所以应该这样写map方法:

<div>
{articles && articles.map((article, i) => <NewsCard />)}
</div> 

或者像这样:

<div>
{articles && articles.map((article, i) => {
return <NewsCard />
})}
</div>

第一个例子暗示了一个隐式返回，因为使用的是箭头函数，而函数体不存在(没有函数体括号{})。