從 API 填充的 select 下拉列表中反應獲取值

Question

我有一個 select 組件：

<Select}>
    {data &&
        data.map((survey) => (
            <Option key={survey.id} value={survey.id}>
                {survey.name}
            </Option>
        ))
     }
</Select>

數據數組來自使用 axios 的 API 提取，然后將其保存在 state 數據中：

const [data, setData] = useState([]);

如何獲取選定的值並顯示它？

我嘗試將onChange處理程序添加到組件並將e.target.value保存在 state 的單獨部分中：

onChange={e => setInput(e?.target?.value)}

但是，我收到一個錯誤，即value is undefined 。 我懷疑這是因為數據尚未加載。

How do you get the selected value from the options when the options are coming from an API? （即，動態下拉）

Answer 1

試試這樣：

  const [data, setData] = useState([]);
  const handleChange = (e) => {
    console.log(e.target.value);
    setData(e.target.value);
  };

   <select onChange={handleChange}>
      {dataArr &&
        dataArr.map((survey) => (
          <option key={survey.id} value={survey.id}>
            {survey.name}
          </option>
        ))}
    </select>

示例：示例

Answer 2

您可以使用useEffect掛鈎來更新 select 選項。 每當data發生變化（在這種情況下意味着加載），useEffect 內部的代碼將被重新評估。 因此，在 useEffect 內部，您可以訪問數據並提取所需的信息。 然后，在onChange處理程序中設置一個新的 state 以在其他地方顯示數據。

這是一個例子：

import React, { useState, useEffect } from 'react';

export default function App() {
  const [data, setData] = useState([]);
  const [APIDataResponse,setAPIDataResponse] = useState([])
  const [selectedData,setSelectedData] = useState()

  useEffect(()=>{ // this is just a simulator for api response, you do not need this useEffect, instead just call your api
    setTimeout(()=> {
      setAPIDataResponse([ 
        { name: 'first Option', id: 1},
        { name: 'Second Option', id:4 }
      ])
    },[2000])
  },[])

  useEffect(()=>{ // this is where you update your options by using your api response
    if(APIDataResponse[0]){
      setData([
        { name: APIDataResponse[0].name, id: APIDataResponse[0].id },
        { name: APIDataResponse[1].name, id: APIDataResponse[1].id },
      ])
      console.log(APIDataResponse[0])
    }
  },[APIDataResponse])

  const handleChange = (e) => { // print the value, and update a new state to show it somewhere in your component
    console.log(e.target.value);
    setSelectedData(e.target.value)
  }
  
  return (<div>
    <select onChange={handleChange}>
      {data &&
        data.map((survey) => (
          <option key={survey.id} value={survey.id}>
            {survey.name}
          </option>
        ))}
    </select>
    {selectedData ? <div>Selected Value: {selectedData} </div> : ''}
  </div>
  );
}

Answer 3

您能否確認選項標簽上的 value 屬性已正確設置並且具有您希望它具有的值。