React setState钩子会两次重置和呈现页面

setState 在 React 中用于更新组件的状态，并触发组件的重新渲染。如果你发现 setState 导致页面两次重置和呈现，可能是由于以下几个原因：

基础概念

• React Hooks: useState 是 React Hooks 中的一个函数，它允许你在函数组件中添加状态。
• 批处理更新: React 可能会将多个 setState 调用合并成一个更新以提高性能。

可能的原因

1. 严格模式 (Strict Mode): React 的严格模式会在开发模式下故意调用某些生命周期方法两次，以帮助发现潜在的问题。这包括 setState。
2. 异步更新: setState 是异步的，如果你在调用 setState 后立即检查状态，可能会得到旧的状态值。
3. 组件渲染两次: 如果你的组件在父组件的每次渲染时都被重新创建，那么它可能会渲染两次。

解决方案

1. 检查严格模式: 如果你在开发环境中使用严格模式，这是预期的行为。确保在生产环境中没有这个问题。
2. 检查严格模式: 如果你在开发环境中使用严格模式，这是预期的行为。确保在生产环境中没有这个问题。
3. 使用函数式更新: 如果你需要基于前一个状态来更新状态，使用函数形式的 setState。
4. 使用函数式更新: 如果你需要基于前一个状态来更新状态，使用函数形式的 setState。
5. 避免不必要的重新渲染: 使用 React.memo, useMemo, 或 useCallback 来避免不必要的组件重新渲染。
6. 避免不必要的重新渲染: 使用 React.memo, useMemo, 或 useCallback 来避免不必要的组件重新渲染。
7. 检查组件生命周期: 如果你在类组件中使用 setState，确保没有在 componentDidUpdate 中触发额外的 setState 调用，这可能会导致无限循环。

应用场景

• 表单处理: 当用户输入时更新状态。
• 动画控制: 根据状态变化控制动画。
• 数据获取: 在组件挂载后获取数据并更新状态。

示例代码

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default React.memo(Counter);

通过上述方法，你可以有效地管理和控制 setState 导致的页面重置和呈现问题。如果问题依然存在，建议检查组件的其他部分，或者使用 React 的开发者工具来调试渲染过程。