V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
AslanFong
V2EX  ›  React

Antd Table dataSource 变了为啥不更新?崩溃

  •  
  •   AslanFong · 2021-02-27 22:11:52 +08:00 · 3478 次点击
    这是一个创建于 1366 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前使用 Antd 的 Table,dataSource 使用 connect Dva 的 model state 某一个数据项。目前有个需求就是,可以修改行 /添加行。然后我的实现就是,使用 reducer,更新 state 中的数据项。问题是,model state 里面确实是更新了,但是 Table 组件不会重新渲染?
    之前有过类似的功能,但是 Table 的每一行修改 /添加都会走请求,也就是用 effect 去更新 state (但最后都是 reducer 更新 state 不是吗)。为啥现在就 Table 就不能重新渲染了 TAT 。
    其实想要的需求就是,用户可以先填写这些 Table 的内容,最后统一 post 。
    各位大佬帮帮菜鸡。
    有不清楚的地方,请让我补充。
    9 条回复    2021-03-01 09:50:18 +08:00
    palmers
        1
    palmers  
       2021-02-27 22:25:24 +08:00
    我觉得 你是直接使用了 props 里的 data 你要不试试 使用 state 的 data 然后 请求后存入 state 里 这样 用户添加修改后随便变更 state
    AslanFong
        2
    AslanFong  
    OP
       2021-02-27 22:45:37 +08:00
    ```
    component.tsx

    export const NewPlan:FC<NewPlanProps> = (props) => {
    const {
    dispatch,
    editingTemplate,
    } = props;

    const handleSubmit = (values: tableRow) => {
    dispatch model reducer -> setTemplateItem
    }

    return (
    <table
    dataSource={editingTemplate}
    />
    )
    }

    const mapStateToProps = (state) => {
    const editingTemplate = state['probations'].editingTemplate;
    return {
    editingTemplate,
    }
    }

    export default connect(mapStateToProps) (NewPlan);
    ```

    ```
    model.ts

    namespace: 'probations'

    state: {
    editingTemplate: []
    }

    effects:{**}

    reducers: {
    setTemplateItem(state, payload:item) {
    ****logic create newTemplete
    return {
    ...state,
    editingTemplate: newTemplate
    }
    ```

    代码 like ⬆️
    @palmers 我使用的是 model state 中的数据,但是这里更新是没有请求的,只是用 reducer 直接更新 state 。
    之前都从 effect 再到 reducer 更新 state 的。
    Augi
        3
    Augi  
       2021-02-28 00:26:11 +08:00 via iPhone
    不可变选择,推测你更新数组或对象内部的数据没有遵循这一原则,你的 newTemplate 还是上一个引用
    AslanFong
        4
    AslanFong  
    OP
       2021-02-28 08:30:35 +08:00
    @Augi 你的意思是说 model 的 reducer 里面写错了?可是我检查了,和之前的一样😂
    Augi
        5
    Augi  
       2021-02-28 10:39:26 +08:00 via iPhone
    @AslanFong 你不是增加了 增加或者删除一项的操作么,这个操作要重新生成一个数组例如使用 filter 或者 concat 方法,而不是在原有的数组上直接操作。
    Augi
        6
    Augi  
       2021-02-28 10:40:30 +08:00 via iPhone
    建议看下 react immutable 是什么意思
    AslanFong
        7
    AslanFong  
    OP
       2021-02-28 18:02:18 +08:00
    @Augi 感谢大佬,就是这个问题!💗
    AslanFong
        8
    AslanFong  
    OP
       2021-02-28 18:03:19 +08:00
    解决了!深拷贝浅拷贝的问题。菜哭我了。
    azcvcza
        9
    azcvcza  
       2021-03-01 09:50:18 +08:00
    给一个新的数组,但是计算的 key 保持原来的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2564 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:40 · PVG 23:40 · LAX 07:40 · JFK 10:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.