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

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."}

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

解决此问题的第三种也是“最难”（但可能是最好的）方法是使用静态类型检查工具。 想到了 Flow，但您也可以使用 TypeScript。