向React子组件传递state时提示state为undefined的问题如何解决

方案1：根组件state设置初始默认值 #

• 声明列表对应的state时直接将初始值设为空数组[]，而非留空或赋值为undefined，从根源上避免子组件拿到不可遍历的非法值。
  示例代码：

  // 根组件state声明
  const [renderList, setRenderList] = useState([]);
  

  表单提交时再调用setRenderList传入接口返回/计算得到的对象列表即可，子组件在首次渲染、未提交表单时拿到的都是可正常执行map的数组，不会报错。

方案2：子组件接收props时做兜底兼容 #

• 子组件使用传入的列表参数时，优先做值判断兜底，即使父组件传入的是undefined也不会触发运行时错误。
  两种常见实现方式：

  // 方式1：解构props时直接设置默认值
  const ListChild = ({ dataList = [] }) => {
    return dataList.map(item => <div key={item.id}>{item.text}</div>)
  }
  
  // 方式2：使用时做空值合并兜底
  const ListChild = (props) => {
    return (props.dataList ?? []).map(item => <div key={item.id}>{item.text}</div>)
  }
  

方案3：根组件条件渲染子组件 #

• 如果需要明确区分列表加载/未准备状态，可以在根组件做渲染判断，列表未就绪时渲染占位内容，就绪后再渲染子组件。
  示例代码：

  // 根组件渲染逻辑
  return (
    <div>
      {/* 你的表单代码 */}
      <Form onSubmit={handleSubmit} />
      {/* 条件渲染子组件 */}
      {renderList.length ? <ListChild dataList={renderList} /> : <p>请提交表单生成列表</p>}
    </div>
  )
  

原理补充：React的setState是异步批量更新机制，你在提交表单的回调中执行state赋值操作后，当前渲染周期的state值不会立刻变更，要等下一次重渲染才会拿到更新后的值，所以初始值未做兜底时，子组件首次渲染必然会拿到undefined触发map调用报错。

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