從API獲取數據后如何設置react-select的默認值

Question

我有一個反應選擇組件，我想更新數據，因此當我從 API 獲取數據時，我想將數據設置為反應選擇我使用此代碼。

我創建了狀態並使用 useEffect 從 API 中獲取數據

const [currency, setCurrency] = useState([]);
    useEffect(() => {
        if (sessionStorage.getItem('AccountId')) {
            axios.get(process.env.REACT_APP_SQL_API_URL + 'Organisation/' + query.search.split('=')[1])
                .then(res => {
                    setCurrency({ label: res.data[0].currency, value: res.data[0].currency });
                })
                .catch(error => console.log(error.response))
        }
        else {
            history.push('/login')
        }
    }, [])

這是反應選擇代碼

<Controller
                                                                    rules={{ required: true }}
                                                                    name="currency"
                                                                    control={control}
                                                                    render={({ field: { onChange } }) =>
                                                                        <Select
                                                                            onChange={(e) => {
                                                                                onChange(e)
                                                                                //handleSelect(e)
                                                                            }}
                                                                            options={[{ value: 'USD', label: 'USD $' }, { value: 'TZS', label: 'TZS' }]}
                                                                            defaultValue={[currency]}
                                                                        />
                                                                    }
                                                                />

Answer 1

你需要有一個狀態：

  const [currency, setCurrency] = useState([]);
    
        <Controller
                     rules={{ 
                     required: true }}
                     name="currency"
                     control={control}
                     render={({ field: { onChange } }) =>
        <Select
               onChange={(e) => {
               onChange(e)
               //handleSelect(e)
               console.log(e.target);
               console.log(e.target.value);
               setCurrency(state=>[ //change state ])
               }}
               options={[{ value: 'USD', label: 'USD $' }, { value: 'TZS', label: 'TZS' }]}
                                                                                
               defaultValue={currency}
               value={currency}
       />
       }
       />