即使我有一个数组，地图也不是一个函数答案

【问题标题】：map is not a function even though I have an array即使我有一个数组，地图也不是一个函数
【发布时间】：2020-08-09 11:52:35
【问题描述】：

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

这是我的主要 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 中 console.log 时，它显示我有一个数组。

我也尝试过 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;

【问题讨论】：

标签： javascript arrays reactjs react-native object

【解决方案1】：

当 props 被传递时，它作为一个对象传递，你必须扩展并获取你需要的单个属性

改变

const DisplayWeapon = (items) => {

到

const DisplayWeapon = ({items}) => {

【讨论】：

@JosephJoestar 这就是为什么你应该使用 typescript/flow :-)