即使我有一個數組，map 也不是 function

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，它就會告訴我 map 不是 function 當我在 DisplayWeapons.js 中 console.log 時它告訴我我有一個數組。

我也試過 Object.keys()，但它只給了我數組“項目”的名稱

這是替代版本，它有效。

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

當道具通過時，它作為 object 傳遞，您必須擴展並獲取您需要的單個屬性

改變

const DisplayWeapon = (items) => {

至

const DisplayWeapon = ({items}) => {