首頁(yè) 猿問 TypeError:...

TypeError: props.items.map 不是函數(shù)

JavaScript

繁花不似錦 2023-03-03 15:22:34

無論我做什么，我都會(huì)不斷收到同樣的錯(cuò)誤。請(qǐng)給我最簡(jiǎn)單的解決方案。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>;};

查看完整描述

4 回答

達(dá)令說

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超6個(gè)贊

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>;

};

顯然你的錯(cuò)誤是在這個(gè)組件的調(diào)用者中，上面的代碼片段將用空數(shù)組替換你的道具中的任何未定義值。要修復(fù)錯(cuò)誤，您需要修復(fù)調(diào)用者或處理項(xiàng)目不是數(shù)組的事實(shí)，例如：

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>;

};

反對(duì) 回復(fù) 2023-03-03

當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

嘗試使用 React PropTypes。item在其中為道具使用所需的架構(gòu)定義。這將幫助編譯器識(shí)別 prop 的類型。

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

反對(duì) 回復(fù) 2023-03-03

慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

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

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

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

};

反對(duì) 回復(fù) 2023-03-03

陪伴而非守候

TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊

您收到此錯(cuò)誤是因?yàn)楫?dāng)您渲染NewsItem道具時(shí)items未提供或它提供的值不是數(shù)組。為避免這種情況，您可以利用propTypesitems并在渲染組件時(shí)指定道具的默認(rèn)值NewsItem而不傳遞道具項(xiàng)目。

const NewsItem = (props) => {

// other code goes here

return <div></div>

}

NewsItem.defaultProps = {

items: []

}

反對(duì) 回復(fù) 2023-03-03

4 回答
0 關(guān)注
157 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

TypeError: props.items.map 不是函數(shù)

TypeError: props.items.map 不是函數(shù)

4 回答

添加回答