react usestate set 数据,要等下一次打开界面才能生效

文章目录

    bug 现象

    在 Antd Pro 的 React 项目中,列表页,编辑一条记录。
    为什么我点击了编辑按钮,弹窗显示的还是上一次打开的数据。

    问题分析

    这是一个 React 状态管理的问题。问题出在 CreateForm 组件的使用方式上。

    当前的问题:

    点击编辑按钮时,虽然 setCurrentRow(record) 更新了数据。但 CreateForm 组件没有正确响应新的 values prop

    主要原因:

    CreateForm 组件可能在内部维护了自己的状态。
    当 values prop 改变时,没有及时更新表单的值。
    建议修改 CreateForm 组件,添加 useEffect 来监听 values 的变化

    CreateForm 代码

    import { useEffect } from 'react';
    // ...existing imports...
    
    const CreateForm: React.FC<CreateFormProps> = (props) => {
      const [form] = Form.useForm();
      
      // 添加这个 useEffect 来监听 values 的变化
      useEffect(() => {
        form.setFieldsValue(props.values);
      }, [props.values]);
    

    确实使用了 github copilot 推荐的改发,就能正常使用了。

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式