React Hooks中使用setTimeout更新状态遇重复渲染问题求助

看起来你遇到的问题是错误信息被清空后又反复出现，组件还一直在重复渲染对吧？我来帮你分析下原因，然后给出修复方案。

问题根源 #

你的代码里有两个关键问题：

• 没有同步props的更新到组件状态：组件里的useState只在初始化时用了props.errorMessage，但之后如果Redux里的错误状态更新（比如API再次返回错误），组件内的errorText不会自动同步，反而可能因为定时器的问题导致状态混乱。
• 未清理定时器：每次errorText变化时都会创建新的定时器，但旧的定时器没有被清除，这会导致多个定时器同时运行，在错误的时机清空或设置状态，甚至引发内存泄漏。

修复后的代码 #

const SetTimeout = props => {
  const [errorText, setError] = useState(props.errorMessage || "");

  // 监听props中的错误信息变化，同步到组件内部状态
  useEffect(() => {
    if (props.errorMessage !== errorText) {
      setError(props.errorMessage || "");
    }
  }, [props.errorMessage]);

  // 处理自动清空错误信息的逻辑，同时清理定时器
  useEffect(() => {
    let timer;
    if (errorText !== "") {
      timer = setTimeout(() => {
        setError("");
        // 可选：如果你想同时清空Redux中的错误状态，在这里添加对应的action调用
        // 比如 props.clearError();
      }, 4000);
    }
    // 组件卸载或依赖变化时，清除定时器避免内存泄漏
    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [errorText]);

  return <div>{errorText}</div>;
};

const MapStateToProps = state => {
  return { errorMessage: state.errorReducer.error };
};

// 可选：如果需要清空Redux状态，添加mapDispatchToProps
// const MapDispatchToProps = dispatch => {
//   return {
//     clearError: () => dispatch({ type: 'CLEAR_ERROR' })
//   };
// };

// 最后记得用connect连接（如果用的是类组件风格的connect）
// export default connect(MapStateToProps, MapDispatchToProps)(SetTimeout);

关键修复点说明 #

• 同步props到组件状态：新增的useEffect会监听props.errorMessage的变化，只要它和组件内的errorText不一致，就会更新状态。这样不管API调用多少次返回错误，组件都能正确显示最新的错误信息。
• 清理定时器：在处理自动清空的useEffect里，我们把定时器存到变量中，并在清理函数里清除它。这样不仅能避免组件卸载时的内存泄漏，还能防止短时间内多次触发错误时，旧的定时器干扰新的逻辑。
• 可选：清空Redux状态：如果你希望组件清空错误信息的同时，Redux里的错误状态也被清空，可以添加一个clearError的action，在定时器触发时调用。这样后续组件渲染时，就不会再从props里拿到旧的错误信息了。

这样修改后，错误信息会在显示4秒后自动清空，而且不会再反复出现，组件也不会不必要地重复渲染啦。

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