react-select 不会显示默认值

Question

我正在尝试根据值数组在 react-select 中显示默认值。我已确认该值等于我要比较的值。我浏览了 , , this post, , and 。尽管有相似之处，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

Answer 1

错误出在您的过滤函数中。你分解值，然后访问value.value。这是未定义的。

相反，采用不分解的选项参数，并访问 option.value。

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

react-select 不会显示默认值

react-select wont display default value

reactjs

react-select