react.js - react函数组件setState问题？

Question

react 在 A 函数设置了state 然后调用 B函数，B函数中使用了state，但直接获取state不是最新值。

使用Effect和通过函数参数传递来解决，感觉都不优雅，大佬们有没有比较好的经验？

Answer 1

单从你的字面来看 useRef 也是能解决的

Answer 2

这个问题是关于 React 函数组件中 state 的更新时机和如何获取最新值的问题。根据 React 的更新机制，组件的状态更新并不是同步的，而是通过异步的方式进行更新。这就意味着在 A 函数中设置了 state 之后，如果立即在 B 函数中获取 state 的值，可能会获取到旧的值而不是最新的值。

解决这个问题的方法有多种，下面提供两种比较常见的方法：

1. 使用 useEffect 钩子

可以使用 useEffect 钩子来监听状态的更新，并在状态更新后执行相应的操作。在 A 函数中设置 state 之后，可以在 useEffect 中返回一个函数，这个函数会在组件重新渲染时执行，从而获取最新的状态值。

例如：

import React, { useState, useEffect } from 'react';function A() {  const [state, setState] = useState(initialState);  // 在 useEffect 中返回一个函数，该函数会在组件重新渲染时执行  useEffect(() => {    // 在这里可以执行需要获取最新状态值的操作    B(state);  }, [state]); // 仅在 state 更新时执行 useEffect 中的代码  const setStateAsync = (newValue) => {    setState(newValue);    // 模拟异步操作，延迟一段时间执行 B 函数    setTimeout(() => B(state), 1000);  };  return <button onClick={() => setStateAsync(newValue)}>Update State</button>;}function B(state) {  console.log('B:', state); // 在这里可以使用最新的状态值进行操作}

在上面的代码中，我们使用了 useEffect 钩子来监听 state 的更新，并在 state 更新后执行 B 函数。在 A 函数中设置 state 之后，我们使用 setTimeout 来模拟异步操作，延迟一段时间执行 B 函数，这样就可以确保在 B 函数中获取到最新的状态值。

2. 使用回调函数传递状态值

另一种解决方法是在 A 函数中设置状态值时，将回调函数作为参数传递给 B 函数。在 A 函数中设置状态值后，将回调函数作为参数传递给 B 函数，这样就可以确保在 B 函数中获取到最新的状态值。

例如：

import React from 'react';function A() {  const [state, setState] = useState(initialState);  const setStateAsync = (newValue) => {    setState(newValue);    B(state);  };  return <button onClick={() => setStateAsync(newValue)}>Update State</button>;}function B(callback) {  callback(); // 在这里可以执行回调函数，从而获取最新的状态值进行操作}