autosuggest 不立即显示项目

问题描述

我正在考虑修复代码中的错误。有一个包含许多表单域的表单。 declare class AccessGroup { id: number; active: boolean; display_name: string; description: string; access_group_features: []; created_at?: Date; created_by?: string; updated_at?: Date; updated_by?: string; static fromJSON(json: any): any; toJSON(): this & { access_group_features: any; }; } 就是其中之一。它旁边有一个按钮。所以当用户点击按钮（加号图标）时，会出现一个弹出窗口，用户输入 let x:AccessGroup={ id:1,active:false,display_name:'',description:'',access_group_features:[] toJSON(): ? } 和 Project Name 并点击提交按钮以保存项目。该表单具有提交、重置和取消按钮（为简洁起见，未在代码中显示）。

表单的项目名称字段具有自动建议功能。下面的代码片段显示了项目名称字段的表单部分。因此，当用户开始输入时，它会显示项目列表并且用户可以从列表中选择。

Project Name

我面临的问题是有人创建了一个新项目。基本上，自动建议列表不会在添加/创建新项目后立即显示新添加的项目。为了看到新添加的项目在自动建议列表中，创建新项目后，用户必须点击表单的取消按钮，然后再次打开相同的表单。这样，他们在提前输入搜索他们最近的项目时可以看到列表已创建。

我应该如何确保在他们添加项目后立即更新列表？

下面是我的 Description 组件与上面使用的一样：

<div id="formDiv">
                <Growl ref={growl}/>
                <Form className="form-column-3">
                    <div className="form-field project-name-field">
                        <label className="MuiFormlabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Project Name</label>
                        <Autoprojects
                            fieldName='projectId'
                            value={values.projectId}
                            onChange={setFieldValue}
                            error={errors.projects}
                            touched={touched.projects}
                        />{touched.projects && errors.v && <Message severity="error" text={errors.projects}/>}
                        <Button className="add-project-btn" title="Add Project" variant="contained" color="primary"
                                type="button" onClick={props.addProject}><i className="pi pi-plus" /></Button>
                    </div>

解决方法

问题是你只在组件 AutoProjects 挂载时调用 fetchRecord。这就是为什么每当您添加新项目时，列表都不会更新的原因。它仅在您关闭表单并再次打开时更新（再次安装 AutoProjects 组件）对于这种情况，我认为您应该将 fetchProjects 的逻辑提升到父组件并将值传递给 AutoProjects。每当您添加新项目时，您都需要再次调用 api 以获取新列表。

autosuggest reactjs reactjs