reactjs - 从API获取数据后如何设置react-select的默认值

Question

我有一个 react 选择组件，我想更新数据，所以当我从我的 API 获取数据时，我想设置我的数据以 react 选择我使用这段代码。

我已经创建状态并使用 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')
        }
    }, [])

这是 react 选择代码

<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}
       />
       }
       />