脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react组件useState异步,数据不能获取

react函数组件useState异步,数据不能及时获取到的问题

 更新时间：2022年08月08日 08:42:13   投稿：jingxian  
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

react useState异步,数据不能获取到

useState() 属于异步函数，在useState() 第一次存储的时候，值会存储不上

因为react中state的更新是异步的，我们setState后，react不会立刻对值进行改变，而是将其暂时放入pedding队列中。react会合并多个state，然后值render一次，所以不要在循环中使用useState，它有可能只render最后一次set值，但是当传入一个函数时，函数就会被放入一个队列中，然后按照顺序执行。

问题

const Dva = () => {
    const [arr, setArr] = useState([0])
    // 两个回调函数，第一个回调函数完成后，会将返回结果作为参数，传入第二个参数
    const handleClick = () => {
        Promise.resolve().then(() => {
            setArr([...arr, 1]);
        })
            .then(() => {
                setArr([...arr, 2]);
            })
    }
    useEffect(() => {
        console.log(arr)
    }, [arr]);
    return (
        <>
            <div>
                <button onClick={handleClick}>change</button>
            </div>
        </>
    )
}

输出：

解决方法一

使用回调方式传参

  const handleClick = () => {
        Promise.resolve().then(() => {
            setArr([...arr, 1]);
        }).then(() => {
            setArr(preStae => [...preStae, 2])
        })
    }
    useEffect(() => {
        console.log(arr)
    }, [arr]);

输出：

react中useState的使用及注意事项

基本使用

useState是 react 提供的一个定义响应式变量的 hook 函数，基本语法如下：

const [count, setCount] = useState(initialCount)
  • 它返回一个状态和一个修改状态的方法，状态需要通过这个方法来进行修改；
  • initialCount 是我们传入的一个初始状态，它是惰性的，我们可以通过传一个函数来返回一个值当作初始状态，并且这个函数只会在初始渲染时执行一次；
const [count, setCount] = useState(() => {
    const initialCount = someExpensiveComputation();
    return initialCount
})

接下来把定义好的状态运用到页面：

import { useState } from 'react'
function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count + 1)
        // 传入一个函数，更新的值是基于之前的值来执行
        // setCount(count => count + 1)
    }
    return (
    	<div>
        	<h4>count: {count}</h4>
            <button onClick={ handleClick }>点击更新状态</button>
        </div>
    )
}

页面渲染完成后，我们可以看到 count的值是 0，当我们点击按钮时，会将 count的值加 1，页面也同时更新；

了解完基础用法后，我们可以思考几个问题；

  • setCount修改值时它是同步还是异步？
  • 连续调用 setCount会发生什么？

第一个问题：setCount修改值时它是同步还是异步？

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count => count + 1)
    console.log("value2: ", count)
}

从图中我们可以看出，页面的值是更新了，但是控制台打印的是之前的值，这是不是也表示 setCount是异步的呢？我们换一种方法，用异步来修改状态；

const handleClick = () => {
    console.log("value1: ", count)
    setTimeout(() => {
        setCount(count => count + 1)
        console.log("value2: ", count)
    }, 0)
}

显然，异步修改状态跟同步修改状态的结果是一致的，这也表明了 setCount 是异步更新的；那我们要怎么拿到更新后的值呢，我们可以用另外一个 hook 函数 useRef，代码如下：

function App() {
  const [count, setCount] = useState(0)
  const countRef = useRef(count)
  countRef.current = count
  const handleClick = () => {
    setCount(count => count + 1)
    console.log("value3: ", count)
    setTimeout(() => {
      console.log(countRef.current)
    }, 0)
  }
  return (
    <div>
      <h4>count: {count}</h4>
      <button onClick={handleClick}>点击更新状态</button>
    </div>
  )
}

从图中我们可以看出，我们已经拿到了更新之后的值，useRef不仅可以用于访问 DOM 节点，也可以用来表示一个容器，current属性可以保存任何值，而且useRef返回的对象会在整个生命周期内保持；

第二个问题：连续调用 setCount会发生什么？

（1）传入一个基于状态的值

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count + 1)
    console.log("value2: ", count)
    setCount(count + 1)
    console.log("value3: ", count)
}

从图片可以看出，如果我们传入的是一个普通值，他只会进行最后一次更新；

（2）传入一个函数

const handleClick = () => {
    console.log("value1: ", count)
    setCount(count => count + 1)
    console.log("value2: ", count)
    setCount(count => count + 1)
    console.log("value3: ", count)
}

可以看出，传入一个函数的话，它会进行两次赋值，因为它更新的值是基于之前的值来执行，所以在开发中推荐使用函数传入的形式进行修改；

注意事项

1、复杂变量的修改

对于复杂类型的变量我们修改时需要重新定义，在原来数据的基础上修改不会引起组件的重新渲染，因为 React 组件的更新机制只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，就不会重新渲染组件；举个例子

function App() {
    const [arr, setArr] = useState([1])
    const pushData = () => {
        arr.push(4)
        setArr(arr)
    }
    return (
        <div>
            <h4>{arr.join("-")}</h4>
            <button onClick={pushData}>点击添加数组</button>
        </div>
    )
}

上面的代码在点击按钮时，视图不会发生变化，但是 arr的值是变化了，如果想修改这个数组，需要重新定义一个数组来修改，在原数组上的修改不会引起组件的重新渲染，React 组件的更新机制对只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，就不会重新渲染组件；

const pushData = () => {
    setArr([...arr, 4])
}

2、异步操作获取更新的值

在类组件里面，修改值时异步操作可以拿到更新后的值，但是在函数组件，异步获取是拿不到更新后的值的，举个例子对比一下：

类组件

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }
    handleClick = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log(this.state.count)
        setTimeout(() => {
            console.log(this.state.count)
        })
    }
    render() {
        return (
            <>
            <h4>count: {this.state.count}</h4>
            <button onClick={this.handleClick}>点击更新状态</button>
            </>
        );
    }
}

函数组件

function App() {
    const [count, setCount] = useState(0)
    const handleClick = () => {
        setCount(count => count + 1)
        console.log("value1: ", count)
        setTimeout(() => {
            console.log("value2: ", count)
        })
    }
    return (
        <div>
            <h4>count: {count}</h4>
            <button onClick={handleClick}>点击更新状态</button>
        </div>
    )
}

显然，在函数组件中是不能通过异步来获取更新的值，我们可以通过 useRef来获取；

const countRef = useRef(count)
countRef.current = count
const handleClick = () => {
    setCount(count => count + 1)
    console.log("value1: ", countRef.current)
    setTimeout(() => {
        console.log("value2: ", countRef.current)
    })
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React+Antd+Redux实现待办事件的方法

    React+Antd+Redux实现待办事件的方法

    这篇文章主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • react如何将字符串转义成html语句

    react如何将字符串转义成html语句

    这篇文章主要介绍了react如何将字符串转义成html语句问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • React+CSS 实现绘制竖状柱状图

    React+CSS 实现绘制竖状柱状图

    这篇文章主要介绍了React+CSS 实现绘制竖状柱状图，文章围绕主题展开详细的内容介绍。具有一定的参考价值，需要的朋友可以参考一下
    2022-09-09
  • React Native 加载H5页面的实现方法

    React Native 加载H5页面的实现方法

    这篇文章主要介绍了React Native 加载H5页面的实现方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • React项目中报错:Parsing error: The keyword 'import' is reservedeslint的问题及解决方法

    React项目中报错:Parsing error: The keyword &a

    ESLint 默认使用的是 ES5 语法,如果你想使用 ES6 或者更新的语法,你需要在 ESLint 的配置文件如：.eslintrc.js等中设置 parserOptions,这篇文章主要介绍了React项目中报错:Parsing error: The keyword 'import' is reservedeslint的问题及解决方法,需要的朋友可以参考下
    2023-12-12
  • webpack 2的react开发配置实例代码

    webpack 2的react开发配置实例代码

    本篇文章主要介绍了webpack 2的react开发配置实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • React Antd中如何设置表单只输入数字

    React Antd中如何设置表单只输入数字

    这篇文章主要介绍了React Antd中如何设置表单只输入数字问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 使用react-color实现前端取色器的方法

    使用react-color实现前端取色器的方法

    本文通过代码给大家介绍了使用react-color实现前端取色器的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2021-11-11
  • React组件的三种写法总结

    React组件的三种写法总结

    本文主要总结了React组件的三种写法以及最佳实践，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • 详解如何给React-Router添加路由页面切换时的过渡动画

    详解如何给React-Router添加路由页面切换时的过渡动画

    这篇文章主要介绍了详解如何给React-Router添加路由页面切换时的过渡动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论