获取错误映射不是 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 ) => {

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

分享

编辑

跟随

Answer 2

当您使用该<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对象中。