02react 函数组件useState的异步问题

已于 2023-02-08 16:06:48 修改
阅读量4.7k 收藏 7
点赞数 4
分类专栏： react 文章标签： react.js 前端 javascript
于 2023-02-08 12:46:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45024453/article/details/128919977
版权

useState的异步问题

react 函数组件

常见的钩子函数：useState、useEffect

useState的异步

useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是 useState 更新异步的问题。

  • 问题描述：把接口返回的数据，使用 useState 储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。或者我们在函数内部使用 setState ，然后立即打印 state，打印的结果还是第一次的state 的值。
  • 原因：useState 返回的更新对象的方法是异步的，要在下次重绘才能获取新值，不要试图在更改状态之后立即获取状态。
  • 控制台报错：
    在这里插入图片描述
  • 代码,函数组件：
import React, { useState, useEffect } from 'react';
import styles from './index.less';
export default function index({ content = {} }) {
  const [data, setData] = useState([]);
  useEffect(() => {
    if (content !== null) {
      const myModityData = content.title.split('***');
      setData(myModityData);
    }
  }, [content.title]);
  return (
    <div className={styles.home_box}>
      <div className={styles.title}>{data[0]}</div>
      <div className={styles.titleBottom}>{data[1]}</div>
      <p className={styles.des}>{content.des}</p>
    </div>
  );
}

原因总结：

这是因为React里事件分为合成事件和原生事件，合成事件和钩子函数都是异步的，原生事件是同步的。因为useState是异步事件，所以会出现不能及时获取到最新值的情况。
useState 返回的更新状态方法是异步的，要在下次重绘才能获取新值。不要试图在更改状态之后立马获取状态。
注意：useEffect的第二个参数，我表明监听content.title但还是不行，因为在React的函数组件中使用useState进行数据存储，导致数据异步，不能及时获取当前最新的数据。

解决办法思路：

  • 办法一：先使用useRef进行存储数据，再使用useEffect监听数据变化，并进行更新。
    在之后需要使用 info 数据的地方只需要获取 infoRef.current 即可获取最新的 info 数据内容。
import React, { useState, useEffect, useRef } from 'react';

const Index = () => {
	const [info, setInfo] = useState()
	const infoRef = useRef()
	useEffect(() => {
		infoRef.current = info
	}, [info])
}
  • 办法二：使用回调函数更改数据
  • useState 使用的两种方式
    我们知道，useState中的 [ ] 是一个解构运算，第一个是设置的值，第二个是用来改变 state 的方法。
    一般情况下，我们使用第一种方式即可，但在某些特殊情况下，第一种方式获取到的值不是最新设置的。
const [data, setData] = useState(1)
setData(data + 1)

const [data, setData] = useState(0)
setData((prev) => prev + 1); // prev 是data 改变之前的值，return 返回的值会作为新状态覆盖data

原文链接：React hooks中 useState踩坑——异步问题

实际解决办法：

办法一：页面能渲染出来，但控制台报错，监听会一直存在，很耗能

控制台报错：
在这里插入图片描述
中文解释：警告：超过了最大更新深度。当组件在useEffect内部调用setState时，可能会发生这种情况，但useEffect要么没有依赖关系数组，要么依赖关系在每次渲染时都会发生变化。

代码：
在这里插入图片描述

完整代码：

const UAVEdge = (props) => {
  const { UAVEdgeModel, dispatch } = props;
  const { productLists, typeId, page } = UAVEdgeModel;
  const [data, setData] = useState(productLists);
  const myRef = useRef();
  useEffect(() => {
    myRef.current = data;
    const myDeleteData = myRef.current.slice(0, 1);
    setData(myDeleteData);
  }, [data]);
  useEffect(() => {
    dispatch({
      type: 'UAVEdgeModel/getProductList',
    });
  }, []);
  return (
    <>
      <Banner content={uavDate} />
      <Content content={data} />
      <Content02 content={productLists} />
      {/* <Swiper /> */}
    </>
  );
};
export default connect(({ UAVEdgeModel }) => ({
  UAVEdgeModel,
}))(UAVEdge);

办法二：useState(使用回调函数)

控制台报错：
在这里插入图片描述
中文解释：
未捕获错误：重新渲染过多。React限制渲染次数，以防止无限循环。
代码：
在这里插入图片描述

完整代码：

import React, { useState, useEffect } from 'react';
import styles from './index.less';
export default function index({ content = [] }) {
  const [data, setData] = useState(content);
  setData((prev) => {
    const myDeleteData = prev.slice(1, 5);
    return myDeleteData
  })
  return (
    <div className={styles.home_box}>
      <div className={styles.home_container}>
        {data.map((item) => {
          return (
            <div className={styles.edge_box} key={item.id}>
              <div className={styles.boxContainer}>
                <img src={item.img} alt="一张图" />
                <div className={styles.title}>{item.title}</div>
                <p className={styles.des}>{item.des}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

办法三：办法一的改进

代码：
在这里插入图片描述

完整代码：

import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
export default function index({ content = [] }) {
  const [data, setData] = useState(content);
  const myRef = useRef();
  useEffect(() => {
    const myDeleteData = data.slice(1, 5);
    myRef.current = myDeleteData;
  }, [data]);
  return (
    <div className={styles.home_box}>
      <div className={styles.home_container}>
        {myRef.current?.map((item) => {
          return (
            <div className={styles.edge_box} key={item.id}>
              <div className={styles.boxContainer}>
                <img src={item.img} alt="一张图" />
                <div className={styles.title}>{item.title}</div>
                <p className={styles.des}>{item.des}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

办法四：组件传参的时候，传数据

思路：组件传参的时候，传数据
控制台报错：
在这里插入图片描述
中文解释：
需要独一无二的key。可是我明明已经给了，为什么？
接口返回的数据：
在这里插入图片描述
函数组件传参，代码：
在这里插入图片描述

函数组件传参，完整代码：

const UAVEdge = (props) => {
  const { UAVEdgeModel, dispatch } = props;
  const { productLists, typeId, page } = UAVEdgeModel;
  useEffect(() => {
    dispatch({
      type: 'UAVEdgeModel/getProductList',
    });
  }, []);
  return (
    <>
      <Banner content={uavDate} />
      <Content content={[productLists[0] || {}]} />
      <Content02 content={productLists} />
      {/* <Swiper /> */}
    </>
  );
};
export default connect(({ UAVEdgeModel }) => ({
  UAVEdgeModel,
}))(UAVEdge);

办法五：办法四的加强版

思路：把数据处理干净传过去，使用useRef()处理数据
代码：
在这里插入图片描述

完整代码：

const GroundEdge = (props) => {
  const { GroundEdgeModel, dispatch } = props;
  const { productLists, typeId, page } = GroundEdgeModel;
  const [data, setData] = useState(productLists);
  const myRef = useRef()
  useEffect(() => {
    const myDeleteData = data.slice(0,1);    
    myRef.current = myDeleteData
  }, [data]);
  useEffect(() => {
    dispatch({
      type: 'GroundEdgeModel/getProductList',
    });
  }, []);
  return (
    <>
      <Banner content={groDate} />
      <Content content={myRef.current} />
      <Content02 content={productLists} />
      {/* <Swiper /> */}
    </>
  );
};
export default connect(({ GroundEdgeModel }) => ({
  GroundEdgeModel,
}))(GroundEdge);

办法六：办法五的加强版

期望后端接口数据：
在这里插入图片描述

实际后端接口数据：
在这里插入图片描述

代码：
在这里插入图片描述

完整代码：

const OnboardEdge = (props) => {
  const { OnboardEdgeModel, dispatch } = props;
  const { productLists, typeId, page } = OnboardEdgeModel;
  const [info, setInfo] = useState(productLists);
  let infoRef = useRef();
  useEffect(() => {
    if (productLists !== null) {
      const myModityData = info.map((item) => {
        return {
          ...item,
          title: item.title.split('***'),
        };
      });
      infoRef.current = myModityData[0];
    }
  }, [info]);

  useEffect(() => {
    dispatch({
      type: 'OnboardEdgeModel/getProductList',
    });
  }, []);

  return (
    <div className={styles.home_box}>
      <Banner content={onbDate} />
      {/* <PageTitleThreeC content={productLists[0] || {}} /> */}
      <PageTitleThreeC content={infoRef.current} />
      <Content01 content={productLists[0]} />
      <Content02 content={productLists} />
      {/* <Swiper /> */}
    </div>
  );
};
export default connect(({ OnboardEdgeModel }) => ({
  OnboardEdgeModel,
}))(OnboardEdge);

推荐使用：办法三useRef()

终极简单：不解决异步问题

之前解决了那么多，但useState在项目实际中依然没有解决。
终极简单思路：处理“干净的”数据传给组件，再传递的时候进行一个数组对象的截取react适用，vue没有实践过。
处理前：
在这里插入图片描述
处理后：
在这里插入图片描述
字符串转数组：
期待把后端的数据title字段进行一个split()截取
在这里插入图片描述

import React, { useState, useEffect, useRef } from 'react';
import styles from './index.less';
export default function index({ content = {} }) {
  let arr = [];
  if (content.title) {
    let title = content.title;
    arr = title.split('***');
  }
  return (
    <div className={styles.home_box}>
      <div className={styles.title}>{arr[0]}</div>
      <div className={styles.titleBottom}>{arr[1]}</div>
      <p className={styles.des}>{content.des}</p>
    </div>
  );
}

总结：

大道求简。在写的过程中，一点一点完善，发现到了最后，有更加简单的方法，根本不用走那一套。
你要问我有没有意义，仁者见仁。

影子信息
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
use-async-function：一个React钩子，用于将异步函数状态集成到React函数组件状态
02-03
useAsyncFunction useAsyncFunction是一个React挂钩，它将异步函数的状态与React函数组件的状态集成在一起。 当异步函数的状态在未决，已解决和已拒绝之间改变时，这将自动重新呈现React函数组件的过程。 安装 npm i use-async-function或 yarn add use-async-function 利用 import useAsyncFunction , { State } from 'use-async-function' ; const myAsyncFunction = async ( ) : Promise < void> =>
react-提供webpack异步加载React组件的高阶函数
08-14
提供webpack异步加载React组件的高阶函数
react useState更新异步问题
今天鸭鸭不想出去玩
04-02 4514
当我们使用react中useState这个hook时候，如下 const [page, setPage] = useState(1); const handlerClick = (e)=>{ setPage(e.current); console.log(page); } 当我打印page时候，此时page还是1，因为useState的更新是异步的，这和react的机制有关，要解决这个可以这样做 1.使用useState的返回值 setPage(e.current); set
useState异步解决方法
最新发布
qq_51439240的博客
04-07 274
如果需要在修改状态后立即获取更新后的值，可以使用同步更新的方式，即将更新函数调用放在同一代码块中。当在React中使用useState修改变量后无法获取修改后的数据时，可以尝试以下多种解决方案。: 使用useEffect钩子来监听状态值的变化，在状态值变化时执行相应的操作。这些方法可以根据具体情况选择使用，以确保在React中能够正确获取修改后的数据。: 在useState中传递回调函数，确保在状态更新后执行所需的操作。: 使用useRef钩子来保存状态的引用，可以实时获取最新的状态值。
React Hooks —— useState异步更新队列、闭包、浅比较深入理解
m0_46569480的博客
06-28 2558
render多次（理论上是一次，这里是因为这些操作作用的都是一个闭包中的同一个状态值x，在第一次改状态还没改成功之前，其他次操作访问的状态值仍旧是还没改的10，直到第一次改状态成功，剩余次操作不会再通过Object.is的测试。第二次flushSync，更新队列里只有一个setX，立即同步执行，使用的也是第一次Demo创建出来的EC的闭包中的state（因为这些flushSync方法都存在于第一个上下文中），也就是10。注意不是因为DOM-DIFF；，会刷新队列，也就是通知更新队列中的所有任务执行：把。
React使用useState异步刷新问题
m0_44982764的博客
06-09 4795
React使用useState异步刷新问题,组件渲染时都是上一次的数据
解决useState状态异步更新的问题
qq_61233877的博客
04-07 8525
自定义hook useCallbackState，用来解决 useState 状态异步更新的问题
React中使用useState数据异步问题解决方法
下雨打伞干嘛的博客
08-08 1万+
react中useState异步问题
React hooks中 useState踩坑-=--异步问题
二三的博客
11-20 6609
useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是useState更新异步的问题。比如我们把接口返回的数据，使用useState储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。或者我们在函数内部使用 setState ，然后立即打印 state，打印的结果还是第一次的state 的值。比如下面的代码实例。
【前端 | React 】React Hook 中 useState 异步回调获取不到最新值及解决方案
热门推荐
04-12 1万+
预先了解 setState 的两种传参方式 1、直接传入新值 setState(options); 列如： const [state, setState] = useState(0); setState(state + 1); 2、传入回调函数 setState(callBack); 例如： const [state, setState] = useState(0); setState((prevState) => prevState + 1); // prevState 是改变之前
useState为什么是异步更新，如何变为同步更新
Superxpang的博客
12-29 1830
调用 `useState` 的更新函数时，React 不会立即更新状态值，而是将更新请求放入一个队列中。在本次事件循环结束时，React 会批量处理队列中的所有状态更新，并触发重新渲染。这种批处理机制有助于提高性能，避免不必要的重复渲染。
ReactUI:函数式ReactUI组件库
03-15
ReactUI 运行生成文档脚本 sh doc.sh git技巧 // 将代码上传到多个仓库 git remote add xxx [email protected]:yym/yyy.git git push -u xxx master 目录结构 ReactUI ├── assets │ └── icons ├── doc ├──...
在React 组件中使用Echarts的示例代码
08-28
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-React组件的CSS构造函数
08-15
?React组件的CSS构造函数
react 中 如何解决使用useState时，因异步而导致的数据不同步的问题（使用 useRef 来解决）
C_guoqing的博客
06-09 3618
react 中 如何解决使用useState时，因异步而导致的数据不同步的问题（使用 useRef 来解决）
react函数组件useState异步，数据不能及时获取到
momo66_的博客
12-09 7574
useState() 属于异步函数，在useState() 第一次存储的时候，值会存储不上 因为react中state的更新是异步的，我们setState后，react不会立刻对值进行改变，而是将其暂时放入pedding队列中。react会合并多个state，然后值render一次，所以不要在循环中使用useState，它有可能只render最后一次set值，但是当传入一个函数时，函数就会被放入一个队列中，然后按照顺序执行。 问题 const Dva = () => { const [arr,
解决React.js的setState的异步问题
DREAM_BOAT_1的博客
10-05 3443
解决React.js的setState的异步问题
React中改变useState数值，无法立刻取到新值的问题
arslan-robot
11-01 2293
useState的set操作是异步的，不能立刻取到新值，如果想立刻取到新数值，只能额外再定义一个useRef变量作为副本，在进行set操作的同时更新useRef变量的数值，useRef变量.current可以立刻取到(使用useRef是因为函数组件内不应该使用var/let定义变量,异步操作获取var/let变量数值取到的永远都是最初默认值，例如在click事件中)useState() 的主要作用是允许您创建有状态的 React 组件，并在渲染时动态更新它们的状态。useState的两种set函数。
usestate异步问题
09-17
useState是React的一个Hook函数，可以用来在函数组件中保存和更新状态。但是，useState函数有一个异步更新状态的问题。 在React的渲染过程中，useState函数的更新状态是异步的，而不是立即生效的。这是因为React会对多个状态更新进行合并，然后一次性进行批量更新，以提高性能。所以，当我们在一个函数组件中多次调用useState函数来更新状态时，实际上只会触发一次UI的重新渲染。 举个例子，假设我们在一个函数组件中调用了两次useState函数来更新状态： ```jsx function MyComponent() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); console.log(count); // 输出的是更新前的count值 setCount(count + 1); console.log(count); // 依然输出的是更新前的count值 } return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Click me</button> </div> ); } ``` 在上述例子中，我们点击按钮时会调用handleClick函数，该函数会两次更新count状态。但是，由于useState更新状态是异步的，所以在两次调用setCount后立即打印count的值，并没有得到更新后的值，而是之前的值。 要解决这个问题，可以使用函数式的setState方式来更新状态，而不是直接传入一个新的值。如下所示： ```jsx function handleClick() { setCount(prevCount => prevCount + 1); setCount(prevCount => prevCount + 1); } ``` 使用这种方式，React会保证每次更新状态都是基于前一次更新后的值，而不是基于更新前的值。 综上所述，useState函数存在异步更新状态的问题，但可以通过使用函数式的setState方式来解决这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值