React页面加载时调用API渲染Select下拉选项的实现问题咨询

数据老陈

2026-9-27

解决方案

核心问题

request.fetchData() 是异步接口方法，你当前的同步取值逻辑拿到的是Pending状态的Promise对象，并非接口实际返回的业务数据，存入state后无法正常遍历渲染
useState未设置初始值，且未对嵌套字段做存在性校验，极端场景下会触发JS报错阻塞渲染

修复后代码

import { useState, useEffect } from 'react';
import { Form, Select } from 'antd'; // 请确认已提前引入对应依赖

const AddNew = () =>{
  // 给state设置初始空对象，避免undefined引发的报错
  const [displayData, setDisplayData] = useState({});
  // 改为异步函数，await等待接口返回实际数据
  const fetchResellerData = async () =>{
    const data = await request.fetchData();
    setDisplayData(data);
  }
  useEffect(() => {
    fetchResellerData();
  }, [])
  return (
    <form> 
     <Form.Item label="状态">
       {getFieldDecorator("status", {
           rules: [{
                    required: true,
                    message: "请选择有效状态",
                  },
                ],
              })(
                <Select placeholder="请选择状态">
                  {/* 可选链兼容字段不存在的场景，兜底空对象避免遍历报错 */}
                  {Object.values(displayData?.activity_status || {}).map((status) => (
                    <Select.Option key={status} value={status}>
                      {status}
                    </Select.Option>
                  ))}
                </Select>
              )}
      </Form.Item>
    </form>
  )
}