Question

我正在尝试在react-bootstrap-typeahead中显示从graphql查询检索的选项列表。我可以看到this.state.options正在更新，并且我的组件正在重新呈现，因此我可以在控制台日志中看到新值。但是我在预先输入的下拉列表中始终显示“未找到匹配项”。

我的react组件渲染方法：

render() {
    console.log('rendering', this.state.options);

    return (
        <ApolloConsumer>
            { client => (
                <AsyncTypeahead
                    {...this.state}
                    labelKey="value"
                    minLength={3}
                    onSearch={e => this.handleSearch(e, client)}
                    placeholder="Search for options..."
                    renderMenuItemChildren={option => (
                        <LookupItem key={option.id} option={option} />
                    )}
                />
            )}
        </ApolloConsumer>
    );
}

我的handleSearch方法：

async handleSearch(searchValue, client) {
    this.setState(state => ({
        ...state,
        isLoading: true,
    }));
    const { data, error } = await client.query({
        query: LookupQuery,
        variables: {
            lookupValue: searchValue,
            limit: 10,
        },
        fetchPolicy: 'network-only',
    });
    if (error) {
        console.log('error', error);
    } else {
        const lookupValues = _.get(data, 'lookup', []);
        this.setState(state => ({
            ...state,
            isLoading: false,
            options: lookupValues.map(item => ({ value: item.value, description: item.description })),
        }));
    }
}

LookupItem：

const LookupItem = ({ option }) => {
    console.log('option', option);
    return (
        <div>
            <span>{option.value}</span>
        </div>
    );
};

我希望一切都有意义。在此先感谢您，如果这真是愚蠢，我们深表歉意！

使用apolloconsumer时显示react-bootstrap-typeahead的选项

0 个答案: