React子组件调用map报not a function错误求助

兄弟，我一眼就瞅出问题所在了——你的DisplayWeapon组件接收参数的方式错了！

问题根源 #

React组件的第一个参数永远是props对象，而不是你直接传的items数组。你现在写的const DisplayWeapon = (items) => { ... }，这里的items其实是包含items属性的props对象（也就是{ items: [你的武器数组] }），你直接给这个对象调用map方法，当然会报错“map is not a function”啦！

你说控制台打印items显示是数组？仔细看的话，它应该是个包裹着数组的对象，而Object.keys(items)返回"items"也正好印证了这一点——你打印的是props对象，不是里面的数组本身。

修复方案 #

有两种简单的修复方式，选哪种都行：

方式1：解构props（推荐）

直接在组件参数里解构出items属性：

import React from "react";
// 这里用{}解构出items
const DisplayWeapon = ({ items }) => {
  console.log(items); // 现在打印的就是真正的数组了
  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>{item.name}</div> {/* 别忘了加key属性哦！ */}
      ))}
    </div>
  );
};
export default DisplayWeapon;

方式2：通过props对象访问

如果不想解构，就明确通过props.items来访问数组：

import React from "react";
// 参数改为props，明确访问props.items
const DisplayWeapon = (props) => {
  console.log(props.items);
  return (
    <div>
      {props.items.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};
export default DisplayWeapon;

为什么你的替代版本能运行？ #

因为你在App组件里直接用的是items状态，它本身就是数组，所以items.map()能正常工作。但把逻辑移到子组件后，子组件必须通过props对象来获取父组件传递的数组，这就是你踩的坑~

另外提醒一句：遍历列表的时候别忘了给每个元素加key属性，这是React的最佳实践哦！

内容的提问来源于stack exchange，提问作者Joseph Joestar