【问题标题】:React-select sometimes doesn't display the options in the dropdown menu on async searchReact-select 有时不会在异步搜索的下拉菜单中显示选项
【发布时间】:2020-01-17 23:10:23
【问题描述】:

这里很奇怪。当使用 React-Select v1.0.0rc(尽管所有 v1.x 都会出现该错误)在异步模式下使用它来搜索 API 时,有时选项不会显示在下拉菜单中。发生这种情况似乎没有任何原因,但它发生在某些搜索查询中,而不是其他搜索查询。

例如 coconut 有效,但 coconut oil 无效,即使两者都返回相似的结果。

奇怪的是,使用 React chrome 开发人员工具,我可以看到选项是在 Select 的状态下设置的,但它们只是没有出现。此外,如果我单击反应选择,然后单击它,结果会出现(在 Firefox 和 chrome 中测试)。这是我的代码和一些截图来说明

<Select.Async name={ this.generateName('ingredient_id')}
          loadOptions={this.getIngredients}
          className="admin-meal-ingredient-search-select"
          autoload={false}
          cache={false}
          multi={false}
          value={this.props.ingredient}
          onChange={this.props.handleIngredientChange}
          placeholder="Search for ingredient" />

在这里你可以看到我输入了一些内容,但没有结果

这里你可以在选项数组的 React 检查器中看到结果

当我点击离开然后点击框,选项是

出现

【问题讨论】:

  • 我只使用选择组件与 onInputChange 相同的问题。如果您找到解决方案,请告诉我。

标签: javascript reactjs react-select


【解决方案1】:

我正在使用 "react-select": "^3.0.4", 并且必须添加 filterOption={false} 属性。

【讨论】:

    【解决方案2】:

    是的,它是 filterOption={false},输入时要小心,这样您就不会想知道为什么它不适合您 :)

    【讨论】:

    【解决方案3】:

    我找到了一个解决方案,那就是设置filterOptions= {false}

    【讨论】:

    • 对不起 - 但这个答案只是浪费了我 1.5 小时。它的奇异! (如下所述!)filterOption={false} :facepalm:
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-16
    • 1970-01-01
    • 1970-01-01
    • 2012-05-27
    相关资源
    最近更新 更多