React 如何获取setState后的最新值

类组件

在类组件中，我们可以在 setState 的第二个参数中传入一个回调函数，在回调函数中获取最新的 state 值。

例如：

this.setState({
  count: this.state.count + 1
}, () => {
  console.log(this.state.count); // 输出最新的state值
});


另外，由于 setState 是一个异步操作，如果需要立即获取最新的 state 值，可以使用 componentDidUpdate 生命周期。在 componentDidUpdate 中获取到最新的 state 值后，需要判断是否需要执行相应的操作。

例如：

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    console.log(this.state.count); // 输出最新的state值
  }
}

函数组件

在函数式组件中，我们使用 useState hook 来实现状态管理。在使用 useState 定义状态时，它会返回一个包含两个元素的数组：当前状态值和更新状态的函数。我们可以在更新状态的函数中，通过传入一个回调函数来获取最新的状态值。

例如：

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1, () => { console.log(count); // 输出最新的state值 });
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
 }

除此之外，如果我们需要在其他钩子函数中获取最新的状态值，可以使用 useEffect 钩子函数，在这个函数中获取到最新的状态值。需要注意的是，由于 setState 是异步的，因此需要在 useEffect 中监听状态值的变化，当状态值发生变化时，执行相应的操作。

例如：

import React, { useState, useEffect } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count); // 输出最新的state值
  }, [count]);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}