问题查找

最近在 使用 React Ant Design 组件开发表单的时候遇到了离谱问题，不管是从 state 还是从 zustance 的状态中拿的 userList 都不会引起状态的更新。

• 因为 React 重渲染的特性，排查了是不是 memo 导致的子组件没渲染。通过在父子组件打印 log 的输出已排查不是这个问题
• 检查 zustand 的问题，取消使用 useshallow，发现父子组件都在重渲染，但是表单没更新，排除
• 检查表单 rowKey，把数据都设置了唯一的 key，还是没重渲染，排除

1
2
3
4
5
6
7
8
9

<Card title="用户列表" extra={<Button onClick={handleShow}>新增</Button>}>
  <Table
    rowKey={"userId"}
    columns={columns}
    dataSource={userList}
    rowSelection={{}}
    loading={userList ? false : true}
  />
</Card>

最后，通过社区找到问题。

传入 dataSource 的数据是数组(切片)，在内存中表现的只是一个引用类型的内存地址。如果直接赋值，那么内存地址不变，自然不会引起表单的刷新。

所以不管是 useState，还是从状态管理中拿的数据，都需要使用 “…” 创建一个新的内存地址。

最好留个好习惯，如果在给一个对象或数组赋值前，给使用拷贝赋值，不能直接把源值直接赋给新变量

1
2
3
4
5
6
7
8
9

addUserList: data => {
  set(state => {
    const list = state.userList as IUserList[];
    list.push(data);
    return {
      userList: [...list],
    };
  });
},