Question

我试图基于值数组在react-select中显示默认值。我已经确认该值等于我要比较的值。我浏览了this post，this post，this post，this post，this post和this post。尽管有相似之处，defaultValue仍然不会设置。通过loggin我已经确认了比较器的结果，它们在大写字母和字符串中都是相同的。

我的选择元素是

   <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.value。这是未定义的。

相反，采用不分解的option参数，然后访问option.value。

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

react-select不会显示默认值

1 个答案: