React报错‘undefined is not an object’，数组遍历实现失败求助

看起来你在React里遍历数组的时候踩了几个常见的小坑，我帮你拆解问题并给出修复方案：

问题根源分析 #

先看你代码里的几个明显问题：

• 变量冲突+错误取值：你已经从./data导入了data，但又写了const {data} = this.props;——这不仅会覆盖导入的data，如果是函数组件的话，根本不能用this.props（函数组件是通过参数获取props的）；就算是类组件，同名变量也会造成混乱。
• 错误的调用方式：你写了this.data.map(...)，但不管是导入的data还是props里的data，都不需要加this.——导入的data是模块级变量，类组件里props的data应该是this.props.data，函数组件直接用data就行。
• map参数误用：map(id => ...)这里的参数应该是数组里的每个对象（比如叫item），而不是id，因为你的数组元素是包含id、lk等属性的对象，不是单纯的id值。

修复方案 #

根据你用的组件类型，分两种情况解决：

如果你用的是函数组件 #

直接使用导入的data数组

import React from 'react';
import data from './data';

function YourComponent() {
  // 遍历数组，每个元素是item对象，记得加唯一key
  const markers = data.map(item => (
    <div key={item.id}>
      编号: {item.id}, 状态: {item.status}, LK值: {item.lk}
    </div>
  ));

  return <div>{markers}</div>;
}

export default YourComponent;

如果需要从父组件通过props传数据

import React from 'react';

// 直接解构props里的data参数
function YourComponent({ data }) {
  // 先判断data是否存在，避免undefined报错
  if (!data) return <div>暂无数据</div>;

  const markers = data.map(item => (
    <div key={item.id}>
      编号: {item.id}, 状态: {item.status}, LK值: {item.lk}
    </div>
  ));

  return <div>{markers}</div>;
}

export default YourComponent;

如果你用的是类组件 #

import React, { Component } from 'react';
import data from './data';

class YourComponent extends Component {
  render() {
    // 使用导入的data数组
    const markers = data.map(item => (
      <div key={item.id}>
        编号: {item.id}, 状态: {item.status}, LK值: {item.lk}
      </div>
    ));

    // 如果要使用props传入的data，改成下面这样（可选链避免undefined）
    // const markers = this.props.data?.map(item => (...))

    return <div>{markers}</div>;
  }
}

export default YourComponent;

重要提醒 #

• 给map生成的元素加唯一key：React需要key来追踪元素变化，用数组里的id是最佳选择，避免渲染警告。
• 防undefined处理：可以用data && data.map(...)或者ES6可选链data?.map(...)，防止数据未加载或传入空值时报错。
• 区分变量来源：不要把导入的模块变量和props变量重名，避免覆盖和混乱。

内容的提问来源于stack exchange，提问作者J. Doe