Question

我正在学习反应，遇到了react-select行为，我无法理解。

我有一个react-select组件，其值是从api调用中获取的。如果我使用defaultValue，则不会从下拉列表中选择该值，但是如果我使用value，则它将为下拉列表选择值。

我只是困惑为什么defaultValue无法正常工作。

<Select
  key={`dropdown`}
  options={options}
  onChange={onSelect}
  defaultValue={defaultValue} />

其中“选项”作为道具从其他组件中传递，而这些组件是通过api调用获取的。

defaultValue也作为prop传递，其结构如下：

defaultValue = {
  label: `Test label`,
  value: `Test value`
}

但是现在如果我将选择组件更改为

<Select
  key={`dropdown`}
  options={options}
  onChange={onSelect}
  value={defaultValue} />

现在可以正常工作了。

value和defaultValue有什么区别。为什么defaultValue无法在反应选择中设置选项。

Answer 1

您应该延迟渲染<Select>元素，直到您的API返回options数据为止。这是一种可能对您有用的方法：

/* options is null/undefined until API sets value to an array */
renderSelect(options) {
  if (options == null) return null;

  return <Select
    key={`dropdown`}
    options={options}
    onChange={onSelect}
    value={defaultValue} />
}

react-select中的“ defaultValue”不在下拉菜单中选择选项，而“ value”在下拉菜单中选择选项

1 个答案: