根据反应中的 API 调用呈现选择选项

Question

尝试进行 API 调用，基于此，我想在页面加载时在选择字段中显示选项。我将来自 API 调用的数据存储在一个状态中，然后我想将该数据显示为选项，我尝试了很多东西，但似乎没有任何效果。我怎样才能以干净的方式实现这一目标。感谢您的任何帮助。

代码

const AddNew = () =>{
const [displayData, setDisplayData] = useState();
const fetchResellerData = () =>{
  const data = request.fetchData();
  setDisplayData(data);
  console.log("testing in progress")
  console.log(data);
}
useEffect(() => {
  fetchResellerData();
}, [])
return (
  <form> 
   <Form.Item label="Status">
     {getFieldDecorator("status", {
         rules: [{
                  required: true,
                  message: "Please enter a valid status",
                },
              ],
            })(
              <Select>
                {displayData && Object.values(displayData.activity_status).map((status) => (
                  <Select.Option key={status} value={status}>
                    {status}
                  </Select.Option>
                ))}
              </Select>
            )}
    </Form.Item>
    

  </form>




)}

Answer 1

  const [displayData, setDisplayData] = useState({});   
 const [selected, setSelected] = useState(0);

  <form>
            <Form.Item label="Status">

            <Select onChange={e=>{
                console.log(e.target.value);
                selected(e.target.value)
            }}>
        {displayData?.activity_status && Object.values(displayData?.activity_status).map((status) => (
            <Select.Option key={status} value={status}>
        {status}
            </Select.Option>
            ))}
            </Select>

            </Form.Item>


            </form>

或者简单地说：

<select  defaultValue={2} onChange={e=>{
                console.log(e.target.value);
            }}>
        {[1,2,3] && Object.values([1,2,3]).map((status) => (
            <option key={status} value={status}>
        {status}
            </option>
            ))}
            </Select>