[英]How to set the first option of the select as default value
I would like to set the selectedSubscriber
value with first item from subscriberOptions
array ( subscriberOptions[0].value
).我想使用
subscriberOptions
数组( subscriberOptions[0].value
)中的第一项设置selectedSubscriber
值。 What is the best way to do it?最好的方法是什么?
const defaultFormInput = {
subscriberOptions: [],
selectedSubscriber: "",
subscriberOptionsIsLoading: true,
};
const [formInput, setFormInput] = useState(defaultFormInput);
useEffect(() => {
//load subscribers from API
async function loadSubscribers() {
const response = await fetch("https://myapi/subscribers");
const body = await response.json();
setFormInput({
...formInput,
subscriberOptions: body.map((x) => ({ value: x.id, name: x.name })),
subscriberOptionsIsLoading: false,
});
// not working
//setFormInput({
// ...formInput,
// selectedSubscriber: formInput.subscriberOptions[0].value,
//});
}
loadSubscribers();
}, []);
JSX JSX
<Select
disabled={formInput.subscriberOptionsIsLoading}
value={formInput.selectedSubscriber}
name="selectedSubscriber"
onChange={handleChange}
>
{formInput.subscriberOptions &&
formInput.subscriberOptions.map((item) => {
return (
<MenuItem key={item.value} value={item.name}>
{item.name}
</MenuItem>
);
})}
</Select>
you need to map your data and set at the same state, it should work.您需要 map 您的数据并设置为相同的 state,它应该可以工作。
const defaultFormInput = {
subscriberOptions: [],
selectedSubscriber: "",
subscriberOptionsIsLoading: true,
};
const [formInput, setFormInput] = useState(defaultFormInput);
useEffect(() => {
//load subscribers from API
async function loadSubscribers() {
const response = await fetch("https://myapi/subscribers");
const body = await response.json();
const mappedData = (body || []).map((x) => ({ value: x.id, name: x.name }));
const [defaultSelect] = mappedData || [];
setFormInput({
...formInput,
subscriberOptions: mappedData,
selectedSubscriber: defaultSelect.value,
subscriberOptionsIsLoading: false,
});
}
loadSubscribers();
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.