如何在从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')
        }
    }, [])

这是 React 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]}
                                                                        />
                                                                    }
                                                                />

- Ibrahim Shabbir

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

- Samira

---

//更改状态的位置将会是什么？ - Ibrahim Shabbir

好的，我已经设置了value属性，但它没有改变。 - Ibrahim Shabbir

你能获取 console.log(e.target.value); 或 console.log(e.target); 吗？ - Samira

谢谢Samira的帮助，我在setCurrency中更改了状态，它起作用了，非常感谢你。 - Ibrahim Shabbir