如何在React函数式组件中立即获取更新后的状态？

首先要注意两个关键问题：

1. React的setState是异步操作，直接在setArray后执行console.log(array)，拿到的是更新前的旧状态
2. 你的createNameList函数里接收的e是点击事件对象，不是输入框的文本值，这会导致数组存入的是事件对象而非输入内容，得先修正这个

下面给你两种可行的实现方式：

方法一：在setArray的更新回调中直接打印 #

利用setArray的函数式更新形式，在回调里生成新数组后直接打印，能确保拿到的是最新状态：

import "./App.css";
import { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [array, setArray] = useState([]);

  function createNameList() {
    // 直接用name状态，不需要传事件对象e
    setArray((prevArray) => {
      const newArray = [...prevArray, name];
      // 首次点击后数组长度为1，判断后打印
      if (newArray.length === 1) {
        console.log("更新后的数组：", newArray);
      }
      return newArray;
    });
  }

  return (
    <div className="App">
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={createNameList}>accept</button>
    </div>
  );
}

export default App;

方法二：用useEffect监听数组变化并打印 #

如果需要在状态更新完成后执行后续操作，useEffect是更通用的方式。这里加个判断，确保只在首次点击（数组从空变为有第一个元素）时打印：

import "./App.css";
import { useState, useEffect } from "react";

function App() {
  const [name, setName] = useState("");
  const [array, setArray] = useState([]);

  function createNameList() {
    setArray((prevArray) => [...prevArray, name]);
  }

  // 监听array的变化，数组更新时触发
  useEffect(() => {
    // 仅在首次添加元素后打印
    if (array.length === 1) {
      console.log("更新后的数组：", array);
    }
  }, [array]);

  return (
    <div className="App">
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={createNameList}>accept</button>
    </div>
  );
}

export default App;

两种方法都能实现“首次点击按钮时打印更新后数组状态”的需求，第一种更直接针对本次更新操作，第二种适合需要在状态更新后执行多步后续逻辑的场景。

内容的提问来源于stack exchange，提问作者qweqwe