react循环遍历useState的数组异步调取接口追加参数后修改原数组处理方案

最新推荐文章于 2024-07-25 01:05:21 发布
最新推荐文章于 2024-07-25 01:05:21 发布
阅读量5k 收藏 9
点赞数 3
分类专栏： react技术栈及全家桶 文章标签： echarts javascript json
互帮互助，点赞收藏。一起成长，欢迎互动。
本文链接：https://blog.csdn.net/weixin_44461275/article/details/121428336
版权

useState的数组，遍历请求异步接口，追加参数后，更新设置原数组

方案01. 可改造 setArr为function
方案02. 封装使用useState的回调函数
方案03：【推荐】useEffect + es6中的Promise.all()处理（复杂任务也适用）
方案04：useEffect + es5中的回调函数callback处理（逻辑有点绕，因要固定排序）
方案05：useEffect + useState回调函数写法（数据量大的时候需要额外测试处理）

.

1.改造useState的更新方法setArr为回调函数：

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 + 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;

4：useEffect + 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;

5：方案05：useEffect + 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;

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

推荐活跃的同学加一下QQ群：152693086（大前端），欢迎加入。

搬砖的前端
关注
专栏目录
usestate 数组增加_React Hooks 源码解析（3）：useState
weixin_39622084的博客
01-24 1170
React 源码版本: v16.11.0源码注释笔记：airingursb/react在写本文之前，事先阅读了网上了一些文章，关于 Hooks 的源码解析要么过于浅显、要么就不细致，所以本文着重讲解源码，由浅入深，争取一行代码也不放过。那本系列讲解第一个 Hooks 便是 useState，我们将从 useState 的用法开始，再阐述规则、讲解原理，再简单实现，最后源码解析。另外，在本...
React循环遍历渲染数组和对象元素
热门推荐
Lockey23的博客
04-28 4万+
遍历渲染数组 1.单纯数组 const pureArr = ['a','b','c','d'] //假如我们想将上面的数组利用react渲染成一个列表，代码如下：{ {pureArr.map(item => ( <li key={item}>item</li> ))} 以上代码在codesandbox中运行结果如下： 2. 对象数组 const objArr =...
React Hooks的使用（一）——useState、useEffect解析
zep
02-18 2480
一、为什么需要Hook? Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。 我们先来思考一下class组件相对于函数式组件有什么优势？比较常见的是下面的优势： class组件可以定义自己的state，用来保存组件自己内部的状态； 函数式组件不可以，因为函数每次调用都会产生新的临时变量； class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑； 比如在componentDidMount中发送
use-state-as-array：将多个React状态定义为一个数组
02-09
useStateAsArrayReact钩子 一个 ，以数组的形式创建多个react useState状态。 安装 $ yarn add use-state-as-array 进口 import useStateAsArray from 'use-state-as-array' ; 用法 const [ stateAsArray , setStateAsArray ] = useStateAsArray ( [ 'first' , 'second' ] ) setStateAsArray ( 0 , 'new value' )
React 中 useState 语法详解
越陌度阡
07-25 412
React 中 useState 语法详解：state：定义的数据源，可视作一个函数组件内部的变量，但只在首次渲染被创造。dispatch：改变state的函数，推动函数渲染的渲染函数，有非函数和函数两种情况。initData：state的初始值，有非函数和函数两种情况。
React 循环数组的2种方式
sunling的专栏
03-01 3万+
我们上边的例子是循环数组的内容到JSX中，其实在数组中可以直接使用JSX语法，看下面的例子。123456let arr=[    &lt;h1 key="1"&gt;Hello world!&lt;/h1&gt;,    &lt;h2 key="2"&gt; React is awesome&lt;/h2&gt;];ReactDOM.render(&lt;div&gt;{arr}&
react 中useState 使用Immer 简化数据更改操作数组、对象
初遇你时动了情
07-11 396
如果你不想改变你的状态结构，你可能更喜欢嵌套传播的捷径。Immer 是一个流行的库，它允许你使用方便但可变的语法进行编写，并负责为你生成副本。
react 数组,React.js创建通过数组循环
weixin_34886431的博客
12-20 251
I'm trying to display a Table of 10 Players. I get the data from via ajax and pass it as props to my Child.var CurrentGame = React.createClass({// get game infoloadGameData: function() {$.ajax({url: '...
React遍历数组
游海东的技术专栏
09-29 2万+
1、问题背景     利用React遍历数组，并用数组元素生成无序列表2、实现源码 React遍历数组 var students = ["张三然","李慧思","赵思然","孙力气","钱流量"]; ReactDOM.render( { students.map(function(username){
react 遍历数组 （结合 key 的使用）
北芒的博客
07-07 1619
说明 使用 map 进行遍历数组 需要使用到 key 值 至于为什么要写 key ，这涉及到底层原理 ---------------- 官网说明 代码展示 <div id="app"></div> <script type="text/babel"> const arr = [1, 2, 3, 4, 5] ReactDOM.render(<div> <ul..
react 多维数组的遍历和 点击添加
weixin_45301448的博客
01-27 1234
react 的多维数组的遍历和其它框架方法是一样的只是写法不一样 import React from 'react' export default class key_arr extends React.Component{ constructor(){ super(); this.state = { multiple:[ ...
usestate 数组增加_React Hook -- useState
weixin_35281210的博客
01-26 5382
本文用来记录和回顾react hook 的使用，因为react的函数式组件式本身是没有状态的和其他类似于class组件的功能，所以一开始，函数组件一般只作为容器组件存在，用来展示父级组件传入的值。而16.8之后出现的 hooks(钩子)，打开了函数式组件的新大门。useState作用：用来记录函数式组件的状态使用方式import React, { useState } from 'react'co...
react中数组列表的简单新增，删除以及修改实践
在无知中学习，在学习中成长，在成长中学习
06-23 1692
react中数组列表的简单新增，删除以及修改实践
React Hooks 教程之 useState
屠龍之技的专栏
12-25 1454
初衷 发现网上很少有用 TypeScript 写的 React 教程，基本都是 JavaScript 写的，而且只是教你要这么写，没有解释为什么要这么写，官方文档也一样 对于从其他端（移动端、后端）转到前端的开发者，一开始可能不太理解 React 的编程思想，因为自己就是这么过来的 于是写了这篇面向非前端开发者的 React Hooks 教程，希望对小白有所帮助，带佬绕道 创建项目 这里使用 Vite 创建 React + TypeScript 的项目，当然你也可以用 React 官方的 create-re
React 之 useState 详解
subsistent的博客
08-17 7307
initialValue是初始状态。它可以是任意值。
react中利用useState操作泛型数组对象
qq_37967853的博客
11-24 3077
react中利用useState操作泛型数组对象
React,Hooks中useState使用
weixin_45389051的博客
07-26 4108
Hooks可以说是非常香了，对于react开发来说 其中最基本的就是useState的使用了 先导入 import React,{useState} from 'react' 介绍下useState useState 本身是一个函数,来自react包,参数和返回值,返回一个数组 参数:作用是给创建出来的状态一个默认值 返回值:数组 元素1:当前state的值 元素2:设置新的值时,使用的一个函数 例: 实现点击按钮加减 export default function Co
React函数组件状态Hook—useState《进阶-对象&&数组》
前端开发工程师
11-16 1908
state 中可以保存任意类型的 JavaScript 值，包括对象。但是，你不应该直接修改存放在 React state 中的对象。相反，当你想要更新⼀个对象时，你需要创建⼀个新的对象（或者将其拷⻉⼀ 份），然后将 state 更新为此对象。
react--jsx语法中的循环展示（className，js{}的用法、fetch调用接口循环）
DcTbnk的博客
07-28 980
<title>第一个循环数据</title> <style> .person { background-color: #999; } </style> </head> <body> <div id="app"></div> <script src="./libs/react.js"></script>
react useState 数组
最新发布
09-03
在React中，`useState` Hook的设计选择返回一个数组，而不是对象，是因为它简化了状态管理并提高了代码可读性。当你调用`useState`时，它实际上返回一个包含两个元素的数组：第一个元素是当前的状态值，第二个元素是用于更新状态的函数（即`setState`）。 ```jsx // 正确的useState使用示例 const [count, setCount] = useState(0); // 这里count和setCount是一对关联的变量 // 当你想管理不同状态时，如布尔值和数字，不需要显式地为它们取别名，可以轻松地添加更多状态 const [isOn, setIsOn] = useState(false); ``` 这样做的好处是，你可以在声明时直接给每个状态分配一个变量名，而无需担心变量名冲突。如果返回的是对象，你可能会遇到这样的情况： ```javascript // 错误的假设：对象形式 const { state: count, setState: setCount } = useState(0); // 你需要为state取别名，这会降低代码清晰度 ``` 因此，`useState`的数组形式鼓励了一种简洁的、直观的方式来组织React组件内的状态管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值