已解決430363個問題，去搜搜看，總會有你想問的

獲取錯誤映射不是 React 中的函數

首頁猿問獲取錯誤映射不是 React 中的函數

獲取錯誤映射不是 React 中的函數

JavaScript

繁星coding 2022-05-26 10:49:59

我有以下代碼會產生錯誤：const List = ( items ) => { return items.map((item, key) => <div key={key}> {item.text}</div>);}export default function App() { const [items, setItems] = useState([{text:'john'}, {text:'smith'}]); return ( <div> <List items={items} /> </div> );}錯誤：items.map 不是函數任何人都可以詳細解釋為什么這不起作用？

查看完整描述

2 回答

米琪卡哇伊

TA貢獻1998條經驗獲得超6個贊

組件與元素<App>一起呈現。<List items={items} />

React 調用List組件{items: [{text:'john'}, {text:'smith'}]}作為 props。

所以，如果你這樣做：

const List = ( props ) => {

console.log(props)

}

你會看到{items: [{text:'john'}, {text:'smith'}]}。因此，我們需要在這里使用對象解構，例如：

const List = ( {items} ) => {

return items.map(({text}, key) => <div key={key}>{text}</div>);

}

得到想要的結果?；蛘?，您可以將其放在一行中，例如：

const List = ({items}) => items.map(({text},key) => <div key={key}>{text}</div>);

編輯

跟隨

反對回復 2022-05-26

FFIVE

TA貢獻1797條經驗獲得超6個贊

當您使用該<Component />語法時，您的函數組件將接收一個props參數，該參數包含您綁定到該組件的屬性。你應該使用props.items：

const List = (props) => {

const {items}=props;

return items.map((item, key) => <div key={key}> {item.text}</div>);

}

您也可以直接解構 props 參數：

const List = ({items}) => {

return items.map((item, key) => <div key={key}> {item.text}</div>);

}

另一種方法是將函數組件調用綁定到模板中：

<div>

{List(items)}

</div>

通過這樣做，該items屬性將不會被包裝在一個props對象中。

反對回復 2022-05-26

2 回答
0 關注
137 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

獲取錯誤映射不是 React 中的函數

獲取錯誤映射不是 React 中的函數

2 回答

添加回答