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

我有以下生成错误的代码：

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

const List=（项目）=>{
返回items.map（（item，key）=>{item.text}）；
}
导出默认函数App（）{
const[items，setItems]=useState（[{text:'john'}，{text:'smith'}]）；
返回(
);
}

错误：items.map不是一个函数

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

当您使用

语法时，您的函数组件将收到一个

props

参数，该参数包装您绑定到组件的属性。您应该使用

道具。道具项目

：

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

const List=（道具）=>{
常量{items}=props；
返回items.map（（item，key）=>{item.text}）；
}

您还可以直接分解props参数：

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

const List=（{items}）=>{
返回items.map（（item，key）=>{item.text}）；
}

另一种方法是将函数组件调用绑定到模板中：

<div>
  {List(items)}
</div>

{列表（项目）}

通过这样做，

items

属性将不会被包装在

props

对象中。

“items”是一个属性，您需要使用如下类似的对象析构函数

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

const List=（{items}）=>{
返回items.map（（item，key）=>{item.text}）；
}

这里的

类似于：

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

const List=（{items}）=>{
返回items.map（{text}，key）=>{text}）；
}

以获得期望的结果。或者，您可以将其放在一行中，如：

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

const List=（{items}）=>items.map（{text}，key）=>{text}）；

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