为何父组件中为数组的Prop传递给子组件后不再是数组？

兄弟，我看你遇到的是父组件传的数组Prop到子组件（或者你当前组件里用this.props.suppliers）突然不是数组的问题，大概率是这几个原因，给你捋捋：

1. 初始值没设成数组 #

如果父组件里suppliers的初始状态是undefined、null这类非数组值（比如还没发起接口请求时的默认值），那当前组件拿到的props.suppliers自然不是数组，直接调用map肯定会报错。

解决办法：

• 父组件初始化suppliers时设为空数组[]：

  // 父组件的state初始化示例
  state = {
    suppliers: []
  };
  

• 或者在当前组件里做兜底处理，避免直接调用map：

  // 用逻辑或兜底为空数组
  const suppliersList = (this.props.suppliers || []).map(supplier => (
    <ListRow name={supplier.name} key={supplier.id} />
  ));
  // 或者用可选链更简洁
  const suppliersList = this.props.suppliers?.map(supplier => (
    <ListRow name={supplier.name} key={supplier.id} />
  )) || [];
  

2. 异步数据加载的时机问题 #

如果suppliers是通过接口异步获取的，在数据返回前，this.props.suppliers还是初始的非数组值，这时候组件已经开始渲染，就会出现“不是数组”的情况。

解决办法：
你已经加了loading判断，可以把suppliersList的渲染完全放到loading为false的分支里，确保只有数据加载完成后才执行map：

return (
  <div className="row">
    <div className="col-sm-4">
      <div className="Section boxed rounded">
        <ButtonNew />
        { this.props.ui.list.loading ? 'loading' : (
          <table className="table table-hover table-condensed">
            <tbody>
              { this.props.suppliers.map(supplier => (
                <ListRow name={supplier.name} key={supplier.id} />
              )) }
            </tbody>
          </table>
        )}
      </div>
    </div>
  </div>
);

3. 传递Prop时意外转换了类型 #

检查父组件传递suppliers的地方，是不是不小心做了什么操作把数组转成了其他类型（比如数据处理时返回了非数组、解构错误等）。

解决办法：

• 在父组件传递Prop前打印值确认类型：

  console.log('suppliers类型:', typeof this.state.suppliers, '是否为数组:', Array.isArray(this.state.suppliers));
  

• 回溯数据处理逻辑，确保最终传递的是数组。

另外，推荐给组件加Prop类型校验，提前发现问题：

import PropTypes from 'prop-types';

class SuppliersPage extends React.Component {
  static propTypes = {
    suppliers: PropTypes.array.isRequired,
    // 其他Prop的校验规则
  };

  // 组件其他代码...
}

这样如果传递的不是数组，控制台会直接给出警告，排查起来更方便。

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