React useState传回调参数报错：Expected 1 arguments, but got 2

错误原因 #

React函数组件中useState返回的状态更新函数（比如你的setVideos）只接受1个参数（新的状态值），类组件里this.setState支持的第二个回调参数，在函数组件的useState里是不存在的，这就是你遇到Expected 1 arguments, but got 2错误的原因。

另外你的状态更新逻辑还有个隐性问题：直接修改原数组videos的元素（newVideos[index].viewedTimes++），这违反了React状态不可变的原则，会导致组件无法正确重渲染。

修正方案 #

1. 删掉setVideos的第二个回调参数
2. 创建新数组和新对象来更新状态，确保状态是全新的引用：

修正后的onVideoPlayed函数代码：

function onVideoPlayed(video: Video, index: number) {
  if (video.viewedTimes && video.viewedTimes > 0) return;
  // 创建新数组，复制原数组内容
  const newVideos = [...videos];
  // 创建新对象，更新viewedTimes，不修改原对象
  newVideos[index] = {
    ...newVideos[index],
    viewedTimes: (newVideos[index].viewedTimes || 0) + 1
  };
  // 只传入新状态值
  setVideos(newVideos);
}

额外优化（可选） #

如果你的状态更新依赖于前一刻的状态值，更稳妥的方式是使用函数式更新，避免因为闭包导致的状态过期问题：

function onVideoPlayed(video: Video, index: number) {
  if (video.viewedTimes && video.viewedTimes > 0) return;
  setVideos(prevVideos => {
    const newVideos = [...prevVideos];
    newVideos[index] = {
      ...newVideos[index],
      viewedTimes: (newVideos[index].viewedTimes || 0) + 1
    };
    return newVideos;
  });
}

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