map 不是一个函数，即使我有一个数组

Question

我查看了很多有类似问题的帖子，但我似乎找不到解决方案。这是我的主要 App.jsimport React, { useState, useEffect } from "react";import { weapons } from "./WeaponsList";import DisplayWeapon from "./components/DisplayWeapon";const App = () => {  const [items, setItems] = useState([]);  useEffect(() => {    setItems(weapons);  }, []);  return (    <div className="container">      <DisplayWeapon items={items} />    </div>  );};export default App;这是我要输出数组的 DisplayWeapon.jsimport React from "react";const DisplayWeapon = (items) => {  console.log(items);  return (    <div>      {items.map((item) => (        <div>{item.name}</div>      ))}    </div>  );};export default DisplayWeapon;这是我的物品清单export const weapons = [  {    name: "Sword",    id: 1,  },  {    name: "Axe",    id: 2,  },  {    name: "Greatsword",    id: 3,  },  {    name: "Hammer",    id: 4,  },];我已经在 App.js 中创建了一个替代版本，它工作正常，但是一旦我将数据传输到 DisplayWeapons.js 它告诉我地图不是一个函数，当我在 DisplayWeapons.js 中控制台记录它时它告诉我我有一个数组。我也试过 Object.keys()，但它只给了我数组“items”的名称这是替代版本，它可以工作。import React, { useState, useEffect } from "react";import { weapons } from "./WeaponsList";//import DisplayWeapon from "./components/DisplayWeapon";const App = () => {  const [items, setItems] = useState([]);  useEffect(() => {    setItems(weapons);  });  return (    <div className="container">      <div>        {items.map((item) => (          <h1>            {item.name} {item.id}          </h1>        ))}      </div>    </div>  );};export default App;

Answer 1

当道具作为对象传递时，您必须展开并获取您需要的单个属性

改变

const DisplayWeapon = (items) => {

到

const DisplayWeapon = ({items}) => {