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 }) => {&nbsp; //&nbsp; &nbsp;console.log(props.item);&nbsp; &nbsp; const item = items.map((e) => {&nbsp; &nbsp; &nbsp; return e.id;&nbsp; &nbsp; });&nbsp; console.log(items);&nbsp; // console.log(props.items.title)&nbsp; return <div>{item}</div>;};显然你的错误是在这个组件的调用者中，上面的代码片段将用空数组替换你的道具中的任何未定义值。要修复错误，您需要修复调用者或处理项目不是数组的事实，例如：import { Component } from "react";import React from "react";const NewsItem = ({ items = [], ...props }) => {&nbsp;&nbsp; &nbsp; if (!Array.isArray(items)) return <span>No items found</span>;&nbsp; &nbsp; const item = items.map((e) => {&nbsp; &nbsp; &nbsp; return e.id;&nbsp; &nbsp; });&nbsp; console.log(items);&nbsp; // console.log(props.items.title)&nbsp; return <div>{item}</div>;};

Answer 2

尝试使用 React&nbsp;PropTypes。item在其中为道具使用所需的架构定义。这将帮助编译器识别 prop 的类型。ComponentName.propTypes&nbsp;=&nbsp;{ &nbsp;&nbsp;items:&nbsp;PropTypes.arrayOf(arrayOf) };

Answer 3

const NewsItem = ({ items = [] }) => {&nbsp; &nbsp; const itemsList = items.map((item) => item.id);&nbsp; &nbsp; return <div> { itemsList.join(', ') } </div>;};

Answer 4

您收到此错误是因为当您渲染NewsItem道具时items未提供或它提供的值不是数组。为避免这种情况，您可以利用propTypesitems并在渲染组件时指定道具的默认值NewsItem而不传递道具项目。const NewsItem = (props) => {&nbsp; &nbsp; // other code goes here&nbsp; &nbsp; return <div></div>}NewsItem.defaultProps = {&nbsp; &nbsp; items: []}