antd table怎么优雅的更新数据?

Question

我有一个table组件，table里有一项是根据数据源的status来决定显不显示某些数据

const App: React.FC = () => {
  const [data, setData] = useState([
    {
      key: "1",
      status: true
    },
    {
      key: "2",
      status: false
    }
  ]);

  const columns: ColumnsType = [
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (_, record) => (
        <div>
          {/* 由这里的单选框控制status */}
          <Radio.Group
            defaultValue={record.status}
          >
            <Radio value={true}>A</Radio>
            <Radio value={false}>B</Radio>
          </Radio.Group> 
          {record.status ? "1" : "2"}
        </div>
      )
    }
  ];

  return <Table columns={columns} dataSource={data} />;
};

export default App;

由于这里的单选框我使用的是defaultValue的形式，所以点击radio的时候是不会触发视图更新的

所以在这里如果我想能更新视图的话，我目前想到的，1.将radio受控，2.调用setData

这里我选择前者，于是加上了onChange事件

...
function changeStatus(key, e) {
  setData(
    data.map((item) => {
      if (item.key === key) item.status = e.target.value;
      return item;
    })
  );
}
...
<Radio.Group
  onChange={(e) => changeStatus(record.key, e)}
  defaultValue={record.status}
>
...
</Radio.Group> 

请问我这种方法是不是比较好的(因为我觉得我这种方法，仅仅只是修改50条(假设)数据中1条数据中的一个布尔值，就重新生成了整个data)

比起radio受控的方式是不是更好(因为我觉得受控的话，要使用useState生成若干个值，管理起来麻烦)，或者有没有更好的更新方式

Answer 1

可以用 useMemo 计算一下

 const newData = useMemo(() => data.filter(item => item.status = status), [status, data]);