react-select 不会显示默认值答案

【问题标题】：react-select wont display default valuereact-select 不会显示默认值
【发布时间】：2021-02-12 09:55:04
【问题描述】：

我正在尝试根据一组值在 react-select 中显示默认值。我已确认该值等于我要比较的值。我浏览过this post、this post、this post、this post、this post 和this post。尽管有相似之处，defaultValue 仍然不会设置。我已经通过登录确认我的比较器的结果是相同的，都是大写的，都是字符串。

我的 Select 元素是

   <Select
    name="disposition"
    classNamePrefix="select"
    options={statusOptions}
    ref={selectInputRefPlan}
    styles={singleStylesRowComp}
    defaultValue={statusOptions.filter(
      ({ value }) => value.value === lead.disposition
    )}
  />

我的数组是

 const statusOptions = [
    { value: "HOT", label: i18n._(t`HOT`) },
    { value: "WIP", label: i18n._(t`WIP`) },
    { value: "LOST", label: i18n._(t`LOST`) },
    { value: "DNC", label: i18n._(t`DNC`) },
    { value: "WON", label: i18n._(t`WON`) },
    { value: "NEW", label: i18n._(t`NEW`) },
  ];

我正在测试value 而不是label，因此不会出现翻译问题。当我记录响应时，value.value === 'NEW' 和 lead.disposition === 'NEW'，但是，defaultValue 不会设置。我还尝试了 value 的道具，并阅读了 6 或 7 个类似的帖子。有简单的语法错误吗？还是我缺少的其他东西？

Here is a sandbox link that demonstrates the issue

【问题讨论】：

是否有可能因为默认值只是它的开头，所以在挂载选择后无法重新分配？
我也有类似的想法，但这就是为什么我也尝试使用 value 道具......想法？我现在正在整理一个代码框
@AlexanderHemming 现在有一个沙箱codesandbox.io/s/lively-wind-s3mtj?file=/index.js
将使用 value prop 来获得更多受控的选择组件。否则我能想到的就是如何制作lead.disposition
沙盒按预期工作。你得到了什么错误？

标签： reactjs react-select

【解决方案1】：

错误在于您的过滤器功能。您分解 value，然后访问 value.value。这是未定义的。

取而代之的是不分解的选项参数，并访问 option.value。

<Select
  name="disposition"
  classNamePrefix="select"
  options={statusOptions}
  ref={selectInputRefPlan}
  styles={singleStylesRowComp}
  defaultValue={statusOptions.filter((option) => option.value === lead.disposition)}
/>;

【讨论】：