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

Question

我有一个 React select 组件，我想更新数据，所以当我从 API 获取数据时，我想将我的数据设置为 React select 我使用此代码。

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

这是反应 select 代码

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