时间戳

首页 > 解决方案 > 尝试填充多选下拉列表时出现“具有相同键的两个孩子”错误

javascript - 尝试填充多选下拉列表时出现“具有相同键的两个孩子”错误

问题描述

我正在尝试使用语义 UI 和 React 创建一个从 API 动态获取数据的多选下拉菜单。它成功地设法获取数据，但是当我再次搜索相同的数据时，它会将其重新添加到选项列表中，并且出现“两个具有相同密钥的孩子”控制台错误。

我添加了一个排除语句“if (!this.state.options.includes(e))”，但显然这没有帮助。

我还尝试遍历当前接收到的数据和之前的状态，并将 ID 相互匹配以防止填充相同的值，但这种策略也没有运气。

  getOptions = () => {

      if(this.state.searchQuery) {
          this.setState({isFetching:true})
          axios.get('URL', {
              params: {
                  query: this.state.searchQuery,
                  api_key: KEY
              }
          })  

          .then( (response) => {

              this.setState((prevState)=>({

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

                      if (!this.state.options.includes(e)) {
                          return {

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

                  })
                  , ...prevState.options]

              }), () => this.setState({isFetching:false}))

          }).catch(function () {
              return
          })
      }
  }


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

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

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

当我再次搜索相同的数据时，我希望选项菜单不要将相同的搜索结果添加到已经存在的选项列表中。

标签： javascriptreactjssemantic-ui-react

解决方案

更新了这个答案，因为我认为问题在于您的map原样将返回具有所需信息的对象或不返回任何内容。在后一种情况下，元素不会被删除，它只是未定义。尝试以下操作，它分两步执行操作：将结果过滤为仅唯一结果，然后仅使用这些唯一值进行状态设置。

const unique = response.data.results.filter(e => {
  return !this.state.options.some(el => el.id === e.id);
});

this.setState(prevState => ({
  options: [
    ...unique.map(e => ({
      key: e.id,
      text: e.name, 
      value: e.id
    }), 
    ...prevState.options
  ]
}));

这可能不是一种超级有效的检查方式，因为您可能会遍历许多现有结果。如果您遇到性能问题，您可以考虑将搜索结果作为一个对象维护或使用类似的东西Set来获得哈希表查找效率。

推荐阅读