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

Question

我查看了很多有类似问题的帖子，但我似乎找不到解决方案。

这是我的主要 App.js

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">

      <DisplayWeapon items={items} />

    </div>

  );

};

export default App;

这是我要输出数组的 DisplayWeapon.js

import 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&nbsp;DisplayWeapon&nbsp;=&nbsp;(items)&nbsp;=>&nbsp;{到const&nbsp;DisplayWeapon&nbsp;=&nbsp;({items})&nbsp;=>&nbsp;{