更新嵌套状态时如何复制对象中的函数？

你现在每次更新状态都要手动复制一遍tooltip的回调函数，完全可以把这个函数抽成独立的复用函数，从根源上避免重复代码：

1. 抽离独立的复用函数 #

把原来的label回调逻辑单独定义成组件内的函数，比如：

const calculateTooltipPercentage = (context) => {
  let value = context.formattedValue;
  let sum = 0;
  const dataArr = context.chart.data.datasets[0].data;
  dataArr.forEach(data => sum += Number(data)); // 用forEach更高效，map本身是用来返回新数组的
  const percentage = (value * 100 / sum).toFixed(0) + '%';
  return tasksForPeriod.length ? ` ${percentage}` : '';
};

2. 初始化状态时直接引用 #

在定义completionRateData初始状态的时候，直接把这个函数赋值给tooltip的label回调：

const [completionRateData, setCompletionRateData] = useState({
  // 其他图表配置...
  datasets: [{
    // 其他数据集配置...
    tooltip: {
      callbacks: {
        label: calculateTooltipPercentage
      }
    }
  }]
});

3. 更新状态时复用函数 #

在applyPeriod函数里更新状态副本时，不需要再重复写整个函数，直接赋值抽离好的函数就行：

const applyPeriod = () => {
  // 复制状态副本（如果是深层嵌套对象，用JSON.parse(JSON.stringify())做深拷贝更稳妥）
  const completionRateClone = JSON.parse(JSON.stringify(completionRateData));
  // 这里处理你的数据更新逻辑，比如修改datasets里的data...
  
  // 直接复用函数，不用重复编写
  completionRateClone.datasets[0].tooltip.callbacks.label = calculateTooltipPercentage;
  
  setCompletionRateData(completionRateClone);
};

这样不管是初始化还是更新状态，都只需要引用同一个函数，再也不用手动复制粘贴整个函数代码了。后续要修改tooltip的逻辑，只需要改这一个函数就行，维护起来也更方便。

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