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