Question

我使用React-Select显示项目列表。这个列表是通过调用Web服务来完成的。

当我点击React-Select以下拉列表时。它引发错误

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;未定义的（Select.js第74行）

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

所以看来，如果有人点击它，反应选择会引发错误。但过了一段时间后，它开始调用我的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时它会抛出错误。

点击下拉列表5/6次后，我看到了消息＆＃34;得到了回复＆＃34;然后错误消息消失，下拉工作正常。

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

如何停止错误？

Answer 1

options应作为Array Object提供，每个const options = [ { value: 'one', label: 'One' }, { value: 'two', label: 'Two' } ];都有一个值和标签属性。例如：

transform(messages: IMessage[], privateFilter: bool) { ... }

Answer 2

如果不需要可搜索，则可以将Select component设置为 searchable={false}

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

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

React-Select Uncaught TypeError：无法读取属性＆＃39; value＆＃39;未定义的

2 个答案: