2

我正在使用 React-Select 来显示项目列表。此列表是通过调用 Web 服务获取的。

当我单击 React-Select 下拉列表时。它抛出和错误

未捕获的类型错误：无法读取未定义的属性“值”（Select.js 第 74 行）

如果我单击几次...然后我可以看到它调用了我的 Web 服务方法并且代码开始正常工作。

因此，如果有人单击它，似乎在最初的几秒钟内 react-select 会引发错误。但一段时间后，它开始调用我的 Web 服务方法并从中获取结果并正确显示。

我的代码很简单

    <Select multi simpleValue
        name="foo"
        value={selectedItem}
        clearable={false}
        options={allItems}
        onChange={updateItem}
        optionRenderer={renderItem}
        valueRenderer={renderLabel}
    />

我的方法中有调试语句updateItem

export function updateItem({field, params}) {
    console.log('going to make webservice request');
    return dispatch => {
        callWebService(params).then(response => {
            console.log('got response');
            const key = Object.keys(response[0])[0];
            const options = response.map(item => ({
                label: item[key], value: item[key]
            }));
            dispatch(populateChannels(options));
        });
    };
}

当页面加载时，我可以看到它打印'going to make webservice request' 但是当我点击 react-select 时它会抛出错误。

最终单击 drop drop 5/6 次后，我看到消息“得到响应”，然后错误消息消失，下拉菜单正常工作。

因此，似乎在 Web 服务返回值之前，如果有人单击它，下拉框会抛出错误。

如何停止错误？

4

2 回答 2

1

options应该作为一个Arrayof Objects 提供，每个都有一个 value 和 label 属性。例子：

const options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];
于 2017-07-26T09:11:09.057 回答
0

如果您不需要可搜索，您可以设置 Select 组件 searchable={false}

如果你阅读了 react-select.es.js 的源代码

在它到达未定义的 this.input 错误之前，有几个地方可以返回。因此，我尝试将 searchable 设置为 false，从而避免了此错误的发生。

于 2019-02-01T21:22:11.953 回答