React中使用useState时状态更新不生效的原因及解决方法

更新时间：2025年12月19日 09:49:52 作者：小明记账簿

在使用 React 的 useState 钩子时,有时我们会遇到通过 set 方法更新状态后界面没有相应变化的情况,这可能是由于一些常见的问题导致的,本文将详细分析这些可能的原因,并提供相应的解决方案,需要的朋友可以参考下

一、正常情况

useState 返回的 set 方法是更新状态的关键。我们需要确保在适当的地方调用它，通常是在事件处理函数或异步操作的回调中。

示例代码

import React, { useState, useEffect } from 'react'
const MyComponent = () => {
  const [count, setCount] = useState(1)
  const increment = () => {
    setCount(count + 1)
  }
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}
export default MyComponent

在这个例子中，当点击按钮时，increment 函数会调用 setCount 来更新 count 的值，从而触发组件重新渲染。

二、不正常情况

再看下面的例子，我想监听键盘的按下事件，每按一次加1，按照这个思路执行，代码没有任何问题，看是真会如愿以偿吗？

import React, { useState, useEffect } from 'react'
const MyComponent = () => {
  const [count, setCount] = useState(1)
  useEffect(() => {
    // 监听全局键盘事件
    window.addEventListener('keydown', onWindowKeyDown)
    return () => {
      // 移除全局键盘事件
      window.removeEventListener('keydown', onWindowKeyDown)
    }
  }, [])
  const onWindowKeyDown = () => {
    console.log('keyDown：', count)
    setCount(count + 1)
  }
  return (
    <div>
      <p>Count: {count}</p>
    </div>
  )
}
export default MyComponent

通过控制台查看，无论执行多少次count始终都是1，setCount(count + 1)始终都是2。

问题原因

组件初始化时， count 状态被设置为1
useEffect 钩子只在组件首次渲染时运行一次（因为依赖数组为空 [] ）
在 useEffect 中， onWindowKeyDown 函数创建了一个闭包，它捕获了当时的 count 值（即初始值1）
每次按下键盘时，调用的是这个闭包函数，它总是引用初始的 count 值（1）
因此，每次调用 setCount(count + 1) 实际上都是执行 setCount(1 + 1) ，导致 count 永远只会被设置为2
即使 state 更新导致组件重新渲染，由于 useEffect 的依赖数组为空，它不会再次运行，闭包中的 count 值也不会更新

如何解决这个问题，不要慌，经过我不懈的研究，终于解决了，我们可以使用函数形式来更新状态。这样可以确保我们总是在最新的状态基础上进行更新。

示例代码

const onWindowKeyDown = () => {
  setCount(prevCount => prevCount + 1) // 使用函数形式
}

在这种形式下，setCount 接收一个函数作为参数，该函数的参数是当前的状态值 prevCount，函数的返回值就是新的状态值。这种方式可以保证获取到的是最新的状态值。

以上就是React中使用useState时状态更新不生效的原因及解决方法的详细内容，更多关于React使用useState状态更新不生效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

浅谈React碰到v-if
这篇文章主要介绍了浅谈React碰到v-if,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
react函数组件useState异步,数据不能及时获取到的问题
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
react koa rematch 如何打造一套服务端渲染架子
这篇文章主要介绍了react koa rematch 如何打造一套服务端渲染架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
Reactjs 错误边界优雅处理方法demo
这篇文章主要为大家介绍了Reactjs 错误边界优雅处理方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
基于react项目打包css引用路径错误解决方案
这篇文章主要介绍了基于react项目打包css引用路径错误解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
React将组件作为参数进行传递的3种方法实例
其实react组件之间传递参数是比较简单的,组件传入参数的一种方式,下面这篇文章主要给大家介绍了关于React将组件作为参数进行传递的3种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
在console中打印React Fiber树的操作步骤
React Fiber 是 React 16 中引入的新的协调引擎或重写的核心算法, 真针Fiber的一个重要的核心概念Fiber Node,这次主要的研究对象是：如何从使用者/学习者角度在js 代码上拿到fiber 树结构的信息,,需要的朋友可以参考下
2024-04-04
React Ant Design树形表格的复杂增删改操作
这篇文章主要介绍了React Ant Design树形表格的复杂增删改操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
React Hook中的useState函数的详细解析
Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性，这篇文章主要介绍了React Hook useState函数的详细解析的相关资料,需要的朋友可以参考下
2022-10-10
React中如何实现受控组件与非受控组件
在 React 开发里,组件可分为受控组件和非受控组件,这篇文章将为大家介绍一下它们的实现原理,方法,区别,作用和应用场景是什么,希望对大家有所帮助
2025-03-03