React Lint警告：state字段allTimes已在setState中使用仍被标记未使用

嘿，我来帮你捋清楚这个问题：你的linter之所以警告allTimes是未使用的state字段，核心原因是React的lint规则通常会检查state是否在组件的渲染逻辑（比如render方法）或者作为props传递给子组件中被使用，而你的代码里allTimes只在setState的更新逻辑里用到，并没有在渲染环节出现，所以linter会误判它是“未使用”的。不过话说回来，你的代码确实存在两个需要修复的不良实践，完全没必要加lint例外，重构才是正确的选择。

第一个问题：直接修改prevState的不可变数据 #

你在setState里直接调用prevState.allTimes.push(timeDelta)，这违反了React的state不可变原则。React依赖state的引用变化来判断是否需要重新渲染组件，直接修改原数组的话，数组的引用没有变，可能导致组件无法正确更新，甚至出现难以排查的bug。

第二个问题：存储不必要的state数据 #

你维护allTimes数组只是为了计算avgTime，但其实完全不需要把整个数组存在state里——这既浪费内存，也会让state变得臃肿。我们可以用更高效的方式来计算平均值：

重构方案一：保持数组但遵循不可变原则 #

如果你确实需要保留allTimes数组（比如后续有其他需求要用到历史时间数据），那要修改成创建新数组的方式：

this.getTime = () => {
  this.setState((prevState) => {
    const timeDelta = Date.now() - this.state.startTime;
    // 创建新数组，不修改原prevState的数组
    const newAllTimes = [...prevState.allTimes, timeDelta];
    const factor = 10 ** -1;
    const avgTime = Math.round((newAllTimes.reduce((a, b) => a + b) / newAllTimes.length) * factor) / factor;
    return { avgTime, allTimes: newAllTimes };
  });
};

这样修改后，既遵循了不可变原则，也让linter能正确识别allTimes的用途（如果后续你在render里用到它的话）。

重构方案二：优化state结构，避免存储冗余数据 #

如果只是为了计算平均时间，完全可以把state改成维护总时长和计数，这样更高效：

// 初始化state
this.state = { avgTime: null, totalTime: 0, timeCount: 0 };

// 计算方法
this.getTime = () => {
  this.setState((prevState) => {
    const timeDelta = Date.now() - this.state.startTime;
    const newTotalTime = prevState.totalTime + timeDelta;
    const newTimeCount = prevState.timeCount + 1;
    const factor = 10 ** -1;
    const avgTime = Math.round((newTotalTime / newTimeCount) * factor) / factor;
    return { avgTime, totalTime: newTotalTime, timeCount: newTimeCount };
  });
};

这种方式不仅避免了存储整个时间数组，还让state更新的逻辑更清晰，同时也解决了linter的警告（因为totalTime和timeCount都是用于计算avgTime的必要依赖，linter会认可它们的用途）。

总结 #

绝对不要加lint例外来忽略这个警告，因为你的代码确实存在不符合React最佳实践的问题。推荐用方案二来重构，既能解决linter警告，又能优化state结构；如果确实需要保留历史时间数据，就用方案一遵循不可变原则。

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