多选下拉列表在新的获取请求上为空白

Question

我正在尝试使用语义UI的“远程”组件在React中创建一个下拉列表。当我在搜索输入中键入内容时，该组件会自动发出请求并填充选项菜单。一切工作都很好，直到发出新请求为止-输入字段将变为空白，即使已选择的值仍处于react状态的“ value”对象中也是如此。我希望已经选择的选项保留在输入字段中，除非在发出其他请求时将其删除。

我知道已经选择的标签（或选项）取决于“ options”对象，并且如果在发出新请求时重新填充options对象，它将丢失其先前的值，因为我在发出新请求时会覆盖它们，但对于如何将已选择的标签保留为州的“选项”对象的一部分，我一无所知，并且在发出新请求时，只需添加这些标签即可。

    state = {
        isFetching: false,
        multiple: true,
        search: true,
        searchQuery: null,
        value: [],
        options: [],
    }


    getOptions = () => {

        if(this.state.searchQuery) {
            axios.get('URL', {
                params: {
                    query: this.state.searchQuery,
                    api_key: KEY
                }
            })  
            .then( (response) => {
                    this.setState({
                        options: 
                        response.data.results.map( (e) => {
                            return {
                                key: e.id,
                                text: e.name,
                                value: e.id
                            }
                        })
                    })
            }).catch(function () {
                return
            })
        }
    }

  handleChange = (e, { value }) => {this.setState({ value })}

  handleSearchChange = (e, { searchQuery }) => {
      this.setState({ searchQuery }, () => {this.getOptions()}
    )}



  render() {
    const { multiple, options, isFetching, search, value } = this.state

    return (
        <Grid>
            <Grid.Column width={5}>
            <Dropdown
                fluid
                selection
                multiple={multiple}
                search={search}
                options={options}
                value={value}
                placeholder='Search keywords'
                onChange={this.handleChange}
                onSearchChange={this.handleSearchChange}
                disabled={isFetching}
                loading={isFetching}
            />
            </Grid.Column>
        </Grid>
        )
    }

Answer 1

我需要创建一个保留先前状态的附加函数，然后将2个数组合并在一起。

但是现在有一个重复出现键的问题...

            this.setState((prevState)=>({
                options: [
                ...response.data.results.map( (e) => {

                    return {

                        key: e.id,
                        text: e.name,
                        value: e.id

                    }

                })

                , ...prevState.options]