React函数组件添加代码后报Cannot update during render警告如何解决？

触发原因 #

• 你编写的form.setFieldsValue逻辑直接写在函数组件的根作用域内，而函数组件的根代码会在每次渲染（render）阶段同步执行
• form.setFieldsValue会触发Ant Design Form组件的内部状态更新，在渲染过程中触发新的状态更新，违反了React要求render过程必须是无副作用纯操作的规则，因此抛出对应警告

修复方案 #

将表单赋值逻辑放到useEffect回调中，监听关联props的变化，在渲染完全结束后再执行更新操作即可，参考代码如下：

import { useEffect } from 'react'
// 其他依赖引入省略

// 组件内部代码
useEffect(() => {
  if(props.filterCriteria.timeRange){
    const start = props.filterCriteria.timeRange.start
    const end = props.filterCriteria.timeRange.end
    form.setFieldsValue({
      created: [moment(start, 'YYYY-MM-DD HH:mm:ss'), moment(end, 'YYYY-MM-DD HH:mm:ss')]
    })
  }
// 仅当filterCriteria.timeRange或form实例变化时才触发执行
}, [props.filterCriteria.timeRange, form])

• 如果开启了React Hooks ESLint校验，确保把所有useEffect内部用到的变量都填入依赖数组即可
• 若不需要支持timeRange中途变更的场景，也可以将依赖数组设为空数组[]，仅在组件首次挂载完成后执行一次赋值

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