Antd表格定时刷新时自定义列值被重置的技术问询

我使用Antd Table组件，设置每5秒通过setInterval调用getData接口获取数据更新表格。点击按钮时，会将变量与dataIndex传入onSubmitTable函数，计算并修改表格指定列的所有值，但每次表格定时刷新后，该列值会被重置为默认值。

• 修改指定列值后的状态：表格目标列显示计算后的自定义值
• 表格定时刷新后列值重置的状态：目标列恢复为接口返回的原始默认值

附代码如下：

const onSubmitTable = (variable, dataIndex) => {
  const newDataSource = [...tableData];
  var values = [];
  var t = fieldArray.find((d) => d.value === variable[1]).serverLabel;
  var formule = `(${dataIndex})=${t}`;
  var expressionFilter = replacementFilter(formule);

  for (var index = 0; index < tableData.length; index++) {
    try {
      var expressionResult = eval(expressionFilter);
      values.push({
        expressionResult: expressionResult,
        key: tableData[index].key,
      });
      tableData[index][dataIndex] = expressionResult;
    } catch (e) {
      console.log(e);
    }
  }
  setTableData(newDataSource);
};

const getData = async () => {
  try {
    await axios(api)
      .then((response) => response.data)
      .then((data) => {
        const dataWrapper = doDataWrapper(data);
        setTableData(dataWrapper);
      });
  } catch (error) {
    console.log(error);
  }
};

useEffect(() => {
  const interval = setInterval(() => {
    getData();
  }, 5000);
  return () => clearInterval(interval);
}, []);

问题核心是每次调用getData时，直接用接口返回的原始数据覆盖了tableData，之前手动修改的值没有被保留。可以通过以下方式解决：

步骤1：修复onSubmitTable中的数组修改问题 #

原代码中直接修改原tableData数组，属于错误的状态修改方式，应该操作拷贝后的newDataSource：

const onSubmitTable = (variable, dataIndex) => {
  const newDataSource = [...tableData];
  var values = [];
  var t = fieldArray.find((d) => d.value === variable[1]).serverLabel;
  var formule = `(${dataIndex})=${t}`;
  var expressionFilter = replacementFilter(formule);

  // 遍历拷贝后的数组，避免修改原状态
  for (var index = 0; index < newDataSource.length; index++) {
    try {
      var expressionResult = eval(expressionFilter);
      values.push({
        expressionResult: expressionResult,
        key: newDataSource[index].key,
      });
      newDataSource[index][dataIndex] = expressionResult;
    } catch (e) {
      console.log(e);
    }
  }
  setTableData(newDataSource);
  // 新增：记录被修改的列
  if (!modifiedColumns.includes(dataIndex)) {
    setModifiedColumns([...modifiedColumns, dataIndex]);
  }
};

步骤2：刷新时保留已修改列的值 #

新增状态记录被修改的列，在getData获取新数据后，将原有修改的值合并到新数据中：

// 新增状态：存储被修改的dataIndex
const [modifiedColumns, setModifiedColumns] = useState([]);

const getData = async () => {
  try {
    const response = await axios(api);
    const data = response.data;
    const newDataWrapper = doDataWrapper(data);
    
    // 合并已修改列的值，避免被接口数据覆盖
    const mergedData = newDataWrapper.map(newItem => {
      const oldItem = tableData.find(item => item.key === newItem.key);
      if (oldItem) {
        // 只保留已修改的列值
        const modifiedValues = modifiedColumns.reduce((acc, col) => {
          acc[col] = oldItem[col];
          return acc;
        }, {});
        return {...newItem, ...modifiedValues};
      }
      return newItem;
    });
    
    setTableData(mergedData);
  } catch (error) {
    console.log(error);
  }
};

内容的提问来源于stack exchange，提问作者a developer