錯誤：無法讀取未定義 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。