TypeError: props.items.map 不是函数

Question

无论我做什么，我都会不断收到同样的错误。请给我最简单的解决方案。import { Component } from "react";import React from "react";const NewsItem = (props) => {  //   console.log(props.item);    const item = props.items.map((e) => {      return e.id;    });  console.log(props.items);  // console.log(props.items.title)  return <div>{item}</div>;};

Answer 1

import { Component } from "react";

import React from "react";

const NewsItem = ({ items = [], ...props }) => {

  //   console.log(props.item);

    const item = items.map((e) => {

      return e.id;

    });

  console.log(items);

  // console.log(props.items.title)

  return <div>{item}</div>;

};

显然你的错误是在这个组件的调用者中，上面的代码片段将用空数组替换你的道具中的任何未定义值。要修复错误，您需要修复调用者或处理项目不是数组的事实，例如：

import { Component } from "react";

import React from "react";

const NewsItem = ({ items = [], ...props }) => {

 

    if (!Array.isArray(items)) return <span>No items found</span>;

    const item = items.map((e) => {

      return e.id;

    });

  console.log(items);

  // console.log(props.items.title)

  return <div>{item}</div>;

};

Answer 2

尝试使用 React PropTypes。item在其中为道具使用所需的架构定义。这将帮助编译器识别 prop 的类型。

ComponentName.propTypes = {
  items: PropTypes.arrayOf(arrayOf)
};

Answer 3

const NewsItem = ({ items = [] }) => {

    const itemsList = items.map((item) => item.id);

    return <div> { itemsList.join(', ') } </div>;

};

Answer 4

您收到此错误是因为当您渲染NewsItem道具时items未提供或它提供的值不是数组。为避免这种情况，您可以利用propTypesitems并在渲染组件时指定道具的默认值NewsItem而不传递道具项目。

const NewsItem = (props) => {

    // other code goes here

    return <div></div>

}

NewsItem.defaultProps = {

    items: []

}