React AutoProjects自动提示组件新增项目后不立即展示新选项

AutoProjects组件的全量项目数据仅在组件首次挂载时，通过componentDidMount拉取一次并存入自身内部state。新建项目的操作由父组件的加号按钮触发，新项目提交成功后没有任何链路通知已挂载的AutoProjects更新本地缓存的项目列表，因此新创建的项目不会出现在自动提示选项中，直到组件被销毁重建（关闭重开表单）才会重新拉取最新全量数据。

1. 父组件新增刷新触发信号 #

在承载表单的父组件中维护一个计数器类的状态，作为刷新触发标识，比如：

const [projectRefreshFlag, setProjectRefreshFlag] = useState(0)

• 将该标识作为prop传递给AutoProjects组件：

  <AutoProjects
    fieldName='projectId'
    value={values.projectId}
    onChange={setFieldValue}
    error={errors.projects}
    touched={touched.projects}
    refreshFlag={projectRefreshFlag}
  />
  

• 在父组件的addProject方法中，当新建项目的接口提交成功后，对该标识做累加更新：

  // 新建项目提交成功的回调逻辑里
  setProjectRefreshFlag(prev => prev + 1)
  

2. AutoProjects组件监听刷新信号触发数据重拉 #

在AutoProjects类组件中新增componentDidUpdate生命周期方法，对比前后两次渲染的refreshFlag值，一旦发现值发生变化，就复用已有的fetchRecords方法重新拉取最新项目列表，同步更新本地状态：

componentDidUpdate(prevProps) {
  // 标识变化时触发全量项目列表刷新
  if (prevProps.refreshFlag !== this.props.refreshFlag) {
    this.setState({ loading: true }, () => {
      this.fetchRecords().then(response => {
        this.setState({
          projects: response,
          loading: false
        }, () => {
          // 同步匹配当前已选中的项目名称
          this.setAutoSuggestValue(response)
          // 若当前输入框已有输入内容，基于新列表实时更新匹配提示项
          const currentInput = this.state.value.trim()
          if (currentInput) {
            this.setState({
              suggestions: this.getSuggestions(currentInput)
            })
          }
        })
      }).catch(err => console.log(err))
    })
  }
}

3. 体验优化要点 #

• 刷新过程中保留用户当前在输入框内输入的关键字，不会因为重新拉取数据清空已输入内容
• 数据拉取完成后自动重新计算匹配的提示项，用户无需删除内容重新输入，就能直接在提示列表中看到刚新建的项目
• 复用组件原有的loading动画逻辑，无需额外新增UI开发量

注意：不要修改成每次输入关键字都全量请求项目列表接口，会增加不必要的网络开销，仅在新建项目提交成功后触发一次全量刷新即可。

内容的提问来源于stack exchange，提问作者Tan