React 16.3：如何可选映射Props数组并避免渲染错误

我一眼就揪出了问题所在——你在Child组件里犯了个很容易踩的小坑：你执行了map操作生成<li>元素，但根本没把这个结果保存下来，反而把原始的对象数组直接塞给了<ul>，这才触发了React的报错。

React没法直接渲染对象（比如{name: 'foo'}这种键值对结构），它只认合法的React元素、字符串、数字这些。你原本的代码里，list还是[{name: 'foo'}, {name: 'bar'}]这个对象数组，map的结果被直接丢弃了，难怪会报错！

修正步骤 #

1. 正确保存map的结果 #

把map生成的<li>元素数组赋值给变量，再渲染这个变量，而不是直接用原始对象数组。

2. 更可靠的默认值处理 #

可以用两种方式给可选数组设置默认空数组，避免undefined导致的映射报错：

• 方式一：在解构props时设置默认值
• 方式二：给子组件配置defaultProps（更符合React组件规范）

完整修正代码 #

Parent组件（基本无需修改） #

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

export class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [{name: 'foo'},{name: 'bar'}],
      // 测试空数组/undefined场景：把上面注释掉，换成下面的
      // myArray: undefined,
    };
  }

  render() {
    return (
      <Child myArray={this.state.myArray} />
    );
  }
}

Child组件（核心修正） #

import React, { Component } from 'react';

export class Child extends Component {
  // 方式二：设置组件默认props，推荐！
  static defaultProps = {
    myArray: []
  };

  render() {
    // 方式一：如果不用defaultProps，可在解构时设置默认值
    // const { myArray = [] } = this.props;

    // 用defaultProps的话，直接用this.props.myArray即可，已确保是数组
    const items = this.props.myArray.map((item) => {
      return (
        <li key={item.name}>{item.name}</li>
      );
    });

    // 补充：typeof数组返回Object是JS正常行为，用Array.isArray判断才准确
    console.log(Array.isArray(this.props.myArray)); // 会输出true

    return (
      <ul>
        {items} {/* 这里渲染的是map生成的<li>元素数组，而非原始对象数组 */}
      </ul>
    );
  }
}

额外说明 #

你看到typeof this.props.myArray输出Object不用惊讶——在JavaScript里，数组本质上是一种特殊的对象，所以typeof对数组返回Object是正常行为。如果要准确判断是否为数组，应该用Array.isArray()方法。

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