获取错误映射不是 React 中的函数

Question

我有以下代码会产生错误：

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 不是函数

任何人都可以详细解释为什么这不起作用？

Answer 1

组件与元素<App>一起呈现。<List items={items} />React 调用List组件{items: [{text:'john'}, {text:'smith'}]}作为 props。所以，如果你这样做：const List = ( props ) => {&nbsp; &nbsp;console.log(props)}你会看到{items: [{text:'john'}, {text:'smith'}]}。因此，我们需要在这里使用对象解构，例如：const List = ( {items} ) => {&nbsp; &nbsp;return items.map(({text}, key) => <div key={key}>{text}</div>);}得到想要的结果。或者，您可以将其放在一行中，例如：const List = ({items}) => items.map(({text},key) => <div key={key}>{text}</div>);分享编辑跟随

Answer 2

当您使用该<Component />语法时，您的函数组件将接收一个props参数，该参数包含您绑定到该组件的属性。你应该使用props.items：const List = (props) => {&nbsp; const {items}=props;&nbsp; return items.map((item, key) => <div key={key}> {item.text}</div>);}您也可以直接解构 props 参数：const List = ({items}) => {&nbsp; return items.map((item, key) => <div key={key}> {item.text}</div>);}另一种方法是将函数组件调用绑定到模板中：<div>&nbsp; {List(items)}</div>通过这样做，该items属性将不会被包装在一个props对象中。