react循环调用useState同步处理方案

最新推荐文章于 2024-04-10 14:17:32 发布
最新推荐文章于 2024-04-10 14:17:32 发布
阅读量9.5k 收藏 15
点赞数 7
分类专栏： react技术栈及全家桶 文章标签： react.js javascript 前端
互帮互助，点赞收藏。一起成长，欢迎互动。
本文链接：https://blog.csdn.net/weixin_44461275/article/details/121269054
版权

目录：

  1. 场景介绍
  2. 循环调用useState同步处理方案（添加数据）
    1. 回调函数 useState(data) 改成：useState(data => 处理data)
    2. 抽离函数外使用变量
  3. 循环调用usesate内，再调接口添加到原数据方案（添加数据+异步接口）
    1. 可改造 setArr为function
    2. 封装使用useState的回调函数
    3. 借用useEffect监听变化

推荐阅读：react循环遍历useState的数组异步调取接口追加参数后修改原数组处理方案：https://blog.csdn.net/weixin_44461275/article/details/121428336

场景介绍：

map数组处理（过滤等）后调用到hooks异常。如：添加商品套餐，循环调用校验后添加到useState数组上。人员数组处理后调用useState数组等等…

在使用useState() 时，先了解 Hook 的规则

  1. 仅顶层调用 Hook：不能在循环，条件，嵌套函数等中调用useState()。在多个useState()调用中，渲染之间的调用顺序必须相同。

  2. 仅从React 函数调用 Hook: 必须函数组件或自定义钩子内部调用useState()。

所以： 不能在循环里面调用hook

.

循环调用useState同步处理方案：

  1. 回调函数 useState(data) 改成：useState(data => 处理data)
  2. 抽离函数外使用变量

改造前：

import React, { useState } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    age: parseInt(Math.random() * 1e2)
  }
}

const Home = () => {
  const [arr, setArr] = useState([]);
  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.age}`}> { item.name }：{ item.age }</div>)
      }
    </div>
  )
  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      setArr([...arr, obj()])
    }
  }
}

export default Home;

结果：每次点击只添加一次，并非5次。注意 useState 异步的，拿不到上步操作后的最新数据
在这里插入图片描述

改造后：

1.回调函数 useState(data) 改成：useState(data => 处理data)

import React, { useState } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    age: parseInt(Math.random() * 1e2)
  }
}

const Home = () => {
  const [arr, setArr] = useState([]);
  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.age}`}> { item.name }：{ item.age }</div>)
      }
    </div>
  )
  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      // setArr([...arr, obj()]) //原来
      setArr(i => [...i, obj()]) //现在。 i是形参，当前为arr变量，可为x、y、a等
    }
  }
}

export default Home;

2.将使用useState()申明的地方替换为全局变量（函数组件外）

import React, { useState } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    age: parseInt(Math.random() * 1e2)
  }
}

let arr = [];
const Home = () => {
  const [other, setOther] = useState(0); //触发 render刷新 非必须可用项目其他方式

  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.age}`}> { item.name }：{ item.age }</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      arr = [...arr, obj()];
      setOther(Math.random()); //核心 只要能触发 render再次刷新的其他方式都行 否则arr数据已更新，dom也不刷新
    }
  }
}

export default Home;

结果：
在这里插入图片描述
正常了~~

注意： setOther(Math.random()); 只是为了刷新render，只要能触发刷新，可用其他替换！！！render不刷新，useEffect监听不到变化的

对于一些项目需要每个数据，进行查询接口查询后再添加

循环usesate内调接口添加到原数据方案

  1. 可改造 setArr为function
  2. 封装使用useState的回调函数
  3. 借用useEffect监听变化

1.可改造 setArr为function：

import React, { useState } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    id: parseInt(Math.random() * 1e4)
  }
}

let arr = [];
const Home = () => {
  // let [arr] =  useState([]); 和 外部let arr = []; 二选一
  const [other, setOther] = useState(0); //触发 render刷新 非必须可用项目其他方式

  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.id}`}> { item.name }：{ item.id } { item?.addKey || ''}</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      let getObj = obj();
      arr = [...arr, getObj];
      setArr(getObj);
      setOther(Math.random()); //核心 只要能触发 render再次刷新的其他方式都行 否则arr数据已更新，dom也不刷新
    }
  }
  
  //原始：let [arr, setArr] =  useState([]); 中setArr异步请求接口 追加参数
  function setArr(ops){
    let setTime = parseInt(Math.random() * 1e4);
    // 模拟异步接口请求，且接口返回时间不稳定
    setTimeout(() => {
      arr.map((ii, idx) => {
        if(ii.id == ops.id){
          ii.addKey = '追加的key用时：' + setTime;
          arr[idx] = ii;
        }
      })
      setOther(Math.random()); //核心 只要能触发 render再次刷新的其他方式都行 否则arr数据已更新，dom也不刷新
    }, setTime)
  }
}

export default Home;

2.封装使用useState的回调函数：

import React, { useState, useEffect, useRef } from 'react';

function useCallbackState (od) {
  const cbRef = useRef();
  const [data, setData] = useState(od);

  useEffect(() => {
      cbRef.current && cbRef.current(data);
  }, [data]);

  return [data, function (d, callback) {
      cbRef.current = callback;
      setData(d);
  }];
}

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    id: parseInt(Math.random() * 1e4)
  }
}

const Home = () => {
  const [arr, setArr] = useCallbackState([]);

  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.id}`}> { item.name }：{ item.id } { item?.addKey || ''}</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      setArr(i => [...i, obj()], (data) => {
        // 5次循环只执行一次，且是最后一次
        addKeyFun(data);
      })
    }
  }
  
  // 追加参数
  function addKeyFun(data){
    data.map((ii, idx) => {
      let setTime = parseInt(Math.random() * 1e4);

      // 模拟异步接口请求，且接口返回时间不稳定
      setTimeout(() => {
        setArr(i => {
          i[idx].addKey = '追加的key用时：' + setTime;
          return [...i]
        });
      }, setTime)
    })
  }
}

export default Home;

3.借用useEffect监听变化
3.1：利用es6中的Promise.all()处理（复杂任务也适用）
3.2：利用es5中的回调函数callback处理（逻辑有点绕，因要固定排序）
3.3：useState回调函数写法（数据量大的时候需要额外测试处理）

.

3.1：利用es6中的Promise.all()处理

import React, { useState, useEffect, useRef } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    id: parseInt(Math.random() * 1e4)
  }
}

const Home = () => {
  const [arr, setArr] = useState([]);

  useEffect(() => {
    addKeyList()
  }, [arr.length])
  // 注意监听arr.length 而不是arr 否则死循环

  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.id}`}> { item.name }：{ item.id } { item?.addKey || ''}</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      setArr(i => [...i, obj()]); //一定要使用函数方式
    }
  }
  
  // 循环添加处理
  function addKeyList(){
    // taskList是一个promise任务数组
    let taskList = arr.map(item => {
      return addKeyFun(item)
    })
    Promise.all(taskList).then(res => {
      setArr(res); //所有接口请求返回后才会一次性渲染
    })
  }
  
  // 追加参数
  function addKeyFun(item){
    return new Promise((resolve, reject) => {
      let setTime = parseInt(Math.random() * 1e4);
      // 模拟异步接口请求，且接口返回时间不稳定
      setTimeout(() => {
        item.addKey = '追加的key用时：' + setTime;
        resolve(item)
      }, setTime)
    })
  }
}

export default Home;

3.2：利用es5中的回调函数callback处理

import React, { useState, useEffect, useRef } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    id: parseInt(Math.random() * 1e4)
  }
}

const Home = () => {
  const [arr, setArr] = useState([]);

  useEffect(() => {
    addKeyList()
  }, [arr.length])
  // 注意监听arr.length 而不是arr 否则死循环

  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.id}`}> { item.name }：{ item.id } { item?.addKey || ''}</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      setArr(i => [...i, obj()]); //一定要使用函数方式
    }
  }

  // 循环添加处理
  function addKeyList(){
    let httpNum = 0;
    let resArr = [...arr];
    arr.map((item, index) => {
      addKeyFun(item, index, (obj, idx) => {
        httpNum++; //每次接口请求记录次数+1，注意不管接口成功还是失败都要+1，注意接口error处理
        resArr[idx] = obj; //赋值新数据到数组
        if(httpNum == arr.length){ //最后一次请求-统一设置到数组
          setArr(resArr);
        }
      })
    })
  }
  
  // 追加参数
  function addKeyFun(item, index, callback){
      let setTime = parseInt(Math.random() * 1e4);
      // 模拟异步接口请求，且接口返回时间不稳定
      setTimeout(() => {
        item.addKey = '追加的key用时：' + setTime;
        callback && callback(item, index);
      }, setTime)
  }
}

export default Home;

3.3：useState回调函数写法（数据量大的时候需要额外测试处理）

import React, { useState, useEffect, useRef } from 'react';

// 随机对象 用于模拟区分
function obj() {
  return {
    name: `某某`,
    id: parseInt(Math.random() * 1e4)
  }
}

const Home = () => {
  const [arr, setArr] = useState([]);

  useEffect(() => {
    addKeyFun(arr)
  }, [arr.length])
  // 注意监听arr.length 而不是arr 否则死循环

  return (
    <div>
      <button onClick={ addObj }>点击+5条数据</button>
      {
        arr.map(item => <div key={`arr${item.id}`}> { item.name }：{ item.id } { item?.addKey || ''}</div>)
      }
    </div>
  )

  // 点击+5条数据
  function addObj(){
    for (let i = 0; i < 5; i++) {
      setArr(i => [...i, obj()]); //一定要使用函数方式
    }
  }
  
  // 追加参数
  function addKeyFun(data){
    data.map((ii, idx) => {
      let setTime = parseInt(Math.random() * 1e4);

      // 模拟异步接口请求，且接口返回时间不稳定
      setTimeout(() => {
        setArr(i => {
          i[idx].addKey = '追加的key用时：' + setTime;
          return [...i]
        });
      }, setTime)
    })
  }
}

export default Home;

结果：
在这里插入图片描述
全部请求完毕后：
在这里插入图片描述

搬砖的前端
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
react 函数组件useState异步变同步
lee727n的博客
08-18 6171
需求 函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码 const [pageNo, setpageNo] = useState(1) const onPullUpRefresh = () => { console.log("上拉加载内容") console.log("上一次的pageNo", pageNo) setpageNo(pageNo + 1) consol
react同步方法_深入 React 的 setState 机制
weixin_42465140的博客
01-30 1203
本文在我的 Github博客 https://github.com/Jacky-Summer/personal-blog 同步更新前言本篇写的 setState(涉及源码部分)是针对 React15 版本，即是没有 Fiber 介入的；为了方便看和写，所以选择旧版本，Fiber 写起来有点难，先留着将会写。setState 在 React 15 的原理能理解，16 版本的也是大同小异。虽...
[react] useState的一些小细节
最新发布
Madman528的博客
04-10 485
因为setState修改是异步的,加上会触发函数重新渲染, 如果代码长这样一秒再修改,然后重新触发setTImeout, 然后再触发,重复触发循环如果这样呢还是会,因为你执行又会重新渲染。
useState 讲解 如何改成同步方法
热门推荐
weixin_43416349的博客
06-15 1万+
在useState()第一次存储的时候,值会存储不上因为react中state的更新是异步的,我们setState后,react不会立刻对值进行改变,而是将其暂时放入pedding队列中。useState（）初始值最好是useState（{statefalse，xxxx}），采用{}增加可扩展性。再次更新，useState是同步方法，只是react的流程调度把useState变成了异步方法的样子。react的流程调度里，会把多个事件合成一个事件，一次性处理，所以，变成了异步。...
useState为什么是异步更新，如何变为同步更新
Superxpang的博客
12-29 2547
调用 `useState` 的更新函数时，React 不会立即更新状态值，而是将更新请求放入一个队列中。在本次事件循环结束时，React 会批量处理队列中的所有状态更新，并触发重新渲染。这种批处理机制有助于提高性能，避免不必要的重复渲染。
【2022面试准备】react中的setState和useState是同步还是异步？
TanMengyi的博客
06-08 5175
1、setState会将多个调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新为什么要合并为一个来执行呢？ 看下段代码： 如果没有react的优化机制，那么上面的setState执行100次，这个组件也会被更新100次。同步执行时useState也会对state进行逐个处理，而setState则只会处理最后一次那么合并的机制原理是什么呢？ react用了事务机制，只要是在同一个事务中的 setState 会进行合并（注意，useState不会进行state的合并，
问：React的useState和setState到底是同步还是异步呢？
beifeng11996的博客
10-02 2180
在正常的react的事件流里（如onClick等）setState和useState是异步执行的（不会立即更新state的结果）多次执行setState和useState，只会调用一次重新渲染render不同的是，setState会进行state的合并，而useState则不会在setTimeout，Promise.then等异步事件中setState和useState是同步执行的（立即更新state的结果）
react-useStateRef:useRef和UseState在一起！
05-03
如何使用安装$ npm i react-usestateref import useState from 'react-usestateref'function MyComponent ( ) { var [ state , setState , ref ] = useState ( 0 ) // ref.current will always have the latest ...
react 兄弟组件如何调用对方的方法示例
10-17
主要介绍了react 兄弟组件如何调用对方的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
点击：简单的React useState钩子示例
02-22
总的来说，`useState`是React函数组件进行状态管理的重要工具，它简化了状态的声明和更新过程，使得函数组件和类组件在状态处理上保持了一致性。在学习和使用这个项目时，你应该关注如何声明状态、如何触发状态更新...
React-simple-crud:Crud React utilizando钩子useState
05-27
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
react-handlers:调用React事件处理程序列表
05-20
React处理程序 用于为单个react事件执行多个处理程序的实用程序。 使用npm或Bower安装。 npm install react-handlers 只需将多个函数传递给导出的函数即可。 var handlers = require ( 'react-handlers' ) ; ...
React处理循环请求接口汇总数据
songshao の blog
05-29 689
【代码】React处理循环请求接口汇总数据。
React 中的useState 和 setState 的执行机制
p1967914901的博客
02-07 4543
React 中的useState 和 setState 的执行机制 useState 和 setState 在React开发过程中 使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制，例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。 它们是同步的还是异步的？ setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步
useState 取最新数据（同步方法）
weixin_43834567的博客
06-14 4585
useState 同步
React hooks 学习笔记 - useState
kotoriyou的博客
05-06 922
使用hook的好处： 1.可以不再使用class（有状态组件） 2.不用考虑复杂的react生命周期钩子函数 3.让this的处理变得简单 例子 普通版本： class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 };...
把useState由异步变为同步
博客of me
05-30 600
将useState的值赋给useRef，然后在useEffect初始化，就变为了同步。
React Hooks之useState详解
RayShyy的博客
02-12 7396
React官方简介：Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文中讲解的useState就是React中的其中一个Hook。
react中useState怎么同步
06-07
在 React 中，useState 是一种 React 的 Hook，用于在函数组件中管理局部 state。如果需要同步 useState 的状态，我们可以使用 useEffect 来监听状态变化并执行相应的操作。 具体来说，我们可以在 useEffect 中监听 useState 的状态变化，并在状态变化时执行相应的操作。例如： ```jsx import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { console.log(`Count changed to ${count}`); // 执行相应的操作 }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ``` 在上面的代码中，我们使用 useEffect 来监听 count 状态的变化，并在状态变化时执行相应的操作。注意，useEffect 的第二个参数是一个数组，用于指定需要监听的状态变量，如果状态变量中的任何一个发生变化，useEffect 中的回调函数就会被执行。在这个例子中，我们只监听了 count 变量，因此只有 count 发生变化时，useEffect 中的回调函数才会被执行。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值