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

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

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

{Math student: [David, Adam, Anna], Biology student: [James, Amanda], Chemistry student: [Alex, Peter]}

解决此问题的另一种方法是实现 React {articles?.length ? articles.map((article, i) => <NewsCard />) : "There are no articles here."} - 您可以阅读有关此 here 的信息。

解决这个问题的第三种“最难”（但可能是最好的）方法是使用静态类型检查工具。想到了 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>

第一个示例暗示隐式返回，因为正在使用箭头函数并且不存在函数体（没有函数体括号 { }）。

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

4 个答案: