React select 渲染选择后设置defaultValue没有任何作用

我使用的是，选项来自服务器（而不是硬编码的客户端）

从服务器返回结果后，选项将正确填充到Select中，但默认值将被忽略

一个简化的例子：

var fruits = [];
var defaultFruit = null;

useEffect(() => {
    setTimeout(() => {
        fruits = [{value: 1, label: 'Apple'}, {value: 2, label: 'Orange'}],
        defaultFruit = {value: 2, label: 'Orange'}  // this doesn't do anything
    }, 1000);
}, []);

return (
    <Select name='fruit' options={fruits} defaultValue={defaultFruit} />
);

var-fruits=[]；
var-defaultFruit=null；
useffect（（）=>{
设置超时（（）=>{
水果=[{value:1，标签：'Apple'}，{value:2，标签：'Orange'}]，
defaultFruit={value:2，标签：'Orange'}//这没有任何作用
}, 1000);
}, []);
返回(
);

我错过什么了吗？
有没有办法动态设置值

解决方案：

---

我们找到了解决办法！对于我们的例子，我们首先只显示“加载…”，只有在获得所有选项后才呈现表单。

您应该给出

defaultFruit={value:2，标签：'Orange'}

。它应该是数组中的一个对象。如果您不知道2的标签是什么（从服务器检索时），您可以执行

fruits.filter（fruit=>fruit.value==2）

并获取该对象并将其设置为defaultFruit。

您应该给出

defaultFruit={value:2，标签：'Orange'}

。它应该是数组中的一个对象。如果您不知道2的标签是什么（从服务器检索时），可以执行

fruits.filter（fruit=>fruit.value==2）

并获取该对象并将其设置为defaultFruit。

正如Vinayak Shenoy在他的回答中所说：您的

defaultValue

应该是

object

类型，具有默认的

value

和

getOptionLabel

属性（可以通过

getOptionValue

和

getOptionLabel

道具进行更改）

---

但是prop

defaultValue

仅用于在初始渲染时设置值，并使

Select

组件不受控制。如果你想控制这个值，你应该考虑使用<代码>值<代码>和<代码> OnChchange < /Case>道具。

< P>如Vinayak Shenoy在他的回答中所说：“你的代码> Debug值应该是<代码>对象< /代码>，默认为“代码>值”和“代码>标签属性。（可以通过

getOptionValue

和

getOptionLabel

道具进行更改）

---

< P> >代码> Debug值>代码只用于设置初始渲染值，并保持<代码>选择< /COD>组件不受控制。如果你想控制这个值，你应该考虑使用<代码>值<代码>和<代码> OnChchange < /Case>道具。

谢谢Ralun和Viayak，我实际上也尝试了整个对象，但它没有WO。rk.您如何使用

value

和

onChange

？不设置

value

使其只读吗？仅设置

value

使其只读，但设置

value

和

onChange

使其只读。

value

用于显示您选择的正确选项。

onChange

道具为us在本例中，我尝试在选择选项时将值设置为state。感谢Rallen和Vinayak，我实际上也尝试了整个对象，但它不起作用。如何使用

value

和

onChange

？设置

value

是否使其只读？仅设置

value

使其只读，但设置

value

和

onChange

使其生效。

value

用于显示所选的正确选项。在这种情况下，在选择选项时使用

onChange

属性将值设置为state。