Question

我正在使用React-Select，其中选项来自服务器（不是硬编码的客户端）。

从服务器获取结果后，在“选择”中正确填充了选项，但是 defaultValue被忽略。

一个简化的示例：

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

我想念什么吗？
有没有办法动态设置值？

解决方案：

我们找到了解决方案！对于我们的情况，我们首先简单地显示“正在加载...”，只有在获得所有选项后才呈现表单。

Answer 1

您应该给defaultFruit = {value: 2, label: 'Orange'}。它应该是数组中的对象之一。如果您不知道2的标号是什么（因为它是从服务器检索的），则可以执行fruits.filter(fruit=> fruit.value===2)并获取该对象并将其设置为defaultFruit

Answer 2

如Vinayak Shenoy在回答中所说：您的defaultValue的类型应为object，默认属性为value和label（可以由{{1 }}和getOptionValue道具）。

但是道具getOptionLabel仅用于在初始渲染时设置一个值，并使defaultValue组件不受控制。如果要控制值，则应考虑使用Select和value道具。

在呈现Select之后设置defaultValue不会执行任何操作

2 个答案: