问题出现背景:在react-函数式组件项目中,主页面引入了AndDesign的Modal弹框(弹框是主页面下面的一个子组件);
主要问题:组件在渲染的过程中出现冲突,没等生命周期执行完之后就进行更新
react项目报错:Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
解决方法:
利用函数式组件的useEffect这个hooks代替class类组件中的ComponentDidMount生命周期,当监听到页面的某个值发生变化时,在进行更新组件的内容
//监听控制Modal弹框显示或隐藏的isModalOpen属性,当它有变化时,在给弹框里的form表单设置初始值
useEffect(()=>{
form.setFieldsValue(record);
},[isModalOpen])