Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Ant设计自动完成选项没有';t更新_Javascript_Reactjs_Autocomplete_Antd - Fatal编程技术网

Javascript Ant设计自动完成选项没有';t更新

Javascript Ant设计自动完成选项没有';t更新,javascript,reactjs,autocomplete,antd,Javascript,Reactjs,Autocomplete,Antd,我正在尝试创建一个Ant设计,其中一个项目是Ant Design Autocomplete。自动完成选项取决于我在自动完成输入上的文本更改时调用的API。API响应有一个项目列表,其中包含我搜索的文本。我想用这些项目更新自动完成选项。 当我获得API响应并升级状态时,“自动完成”选项也会更新,但它们会将以前的搜索结果附加到新结果中,我不明白为什么以前的结果不会被删除。 为什么结果是先前和实际响应的附加,而不是一个全新的选项数组? 这是自动完成代码: <Form.Item

我正在尝试创建一个Ant设计,其中一个项目是Ant Design Autocomplete。自动完成选项取决于我在自动完成输入上的文本更改时调用的API。API响应有一个项目列表,其中包含我搜索的文本。我想用这些项目更新自动完成选项。 当我获得API响应并升级状态时,“自动完成”选项也会更新,但它们会将以前的搜索结果附加到新结果中,我不明白为什么以前的结果不会被删除。 为什么结果是先前和实际响应的附加,而不是一个全新的选项数组? 这是自动完成代码:

<Form.Item
          label='Titolo'
          labelCol={{
            xs: { span: 1, offset: 7 },
            sm: { span: 1, offset: 7 },
            md: { span: 2, offset: 6, },
            lg: { span: 2, offset: 6 },
            xl: { span: 2, offset: 6 },
            xxl: { span: 1, offset: 7 },
          }}
          wrapperCol={{
            xs: { span: 8 },
            sm: { span: 8 },
            md: { span: 12, offset: 6 },
            lg: { span: 8, offset: 0 },
            xl: { span: 8 },
            xxl: { span: 8 },
          }}
        >
          {getFieldDecorator('title',
            {
              rules: [{ required: true, message: 'Inserire il titolo!' }],
              initialValue: this.state.jobDescriptionTitleOptions
            })(
              <AutoComplete
                placeholder="Cerca un titolo"
                dataSource={this.state.jobDescriptionTitleOptions}
                onSearch={this.onJobTitleSearch}
                onChange={this.onJobTitleChange}
              />
            )}
        </Form.Item>
}

}

jobTitleChange上的道具不重要,它只是更新上部组件中的标题状态,并将其传递给自动完成所在的组件

onJobTitleChange = (title) => {
this.props.onJobTitleChange(title)
onJobTitleSearch = (title) => {
console.log(title)
this.props.onJobTitleChange(title)
if (title || title.length !== 0)
  Axios.get(`/api?searchString=${title}`)
    .then(response => {
      let jobDescriptionTitleOptionsArray = [];
      response.data._embedded.professionDescriptions.forEach(option => {
        jobDescriptionTitleOptionsArray.push(option.professionDescription);
      });

      this.setState({
        jobDescriptionTitleOptions: jobDescriptionTitleOptionsArray
      })
    })
    .catch(error => {
      //TODO Gestione dell'errore
    })
else
  this.setState({
    jobDescriptionTitleOptions: []
  })