React中useState状态更新延迟1步的问题修复咨询

我从数据库获取了一个数组（示例中为target数组），需要将其中的记录写入另一张数据表。使用raw state存储数据时出现延迟问题：首次点击时插入的是initialState，第二次点击才插入target[0]的数据。如何修复才能让首次点击时raw就被target[0]的数据填充？

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const target = [
    { id: 16, word: "sixteen" },
    { id: 17, word: "seventeen" },
    { id: 18, word: "eighteen" }
  ];

  const initialState = {
    tid: "",
    name: ""
  };
  const [count, setCount] = useState(0);
  const [raw, setRaw] = useState(initialState);

  function change() {
    setRaw((raw) => ({ ...raw, tid: target[count]?.id }));
    setRaw((raw) => ({ ...raw, name: target[count].word }));
    console.log(raw); //axios function to insert record
    setCount((count) => count + 1);
  }

  return (
    <div className="App">
      <h1 onClick={change}>Click</h1>
      <h2>Count : {count}</h2>
      <h2>
        Array: {target[count]?.id},{target[count].word}
      </h2>
      <h2>
        State Object : {raw.tid},{raw.name}
      </h2>
    </div>
  );
}

1. React状态更新异步：setRaw是异步操作，调用后不会立刻修改raw变量的当前值，所以console.log(raw)打印的始终是更新前的旧状态。
2. 多次状态更新合并：连续两次调用setRaw会被React合并为一次更新，且两次更新都依赖当前闭包中的count值，但核心问题是你在状态未完成更新时就尝试读取并使用它。

方案一：合并状态更新，直接使用临时变量执行插入 #

把两次setRaw合并成一次，提前取出当前要插入的数据存到临时变量里，插入操作直接用这个临时变量，不用等状态更新：

function change() {
  const currentItem = target[count];
  if (!currentItem) return; // 防止数组越界
  // 组装要插入的数据
  const newRawData = { tid: currentItem.id, name: currentItem.word };
  // 更新状态
  setRaw(newRawData);
  // 直接用临时变量执行插入
  console.log(newRawData); // 这里替换成你的axios插入逻辑
  // 更新计数
  setCount(prev => prev + 1);
}

方案二：用useEffect监听状态变化触发插入 #

如果必须依赖raw状态的更新来执行插入，可以通过useEffect监听raw的变化，当状态变为目标数据时执行操作：

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

export default function App() {
  const target = [
    { id: 16, word: "sixteen" },
    { id: 17, word: "seventeen" },
    { id: 18, word: "eighteen" }
  ];

  const initialState = {
    tid: "",
    name: ""
  };
  const [count, setCount] = useState(0);
  const [raw, setRaw] = useState(initialState);

  // 监听raw状态变化，执行插入
  useEffect(() => {
    // 排除初始状态，避免首次渲染就执行插入
    if (raw.tid !== "" && raw.name !== "") {
      console.log(raw); // 这里替换成你的axios插入逻辑
    }
  }, [raw]);

  function change() {
    const currentItem = target[count];
    if (!currentItem) return;
    setRaw({ tid: currentItem.id, name: currentItem.word });
    setCount(prev => prev + 1);
  }

  return (
    <div className="App">
      <h1 onClick={change}>Click</h1>
      <h2>Count : {count}</h2>
      <h2>
        Array: {target[count]?.id},{target[count]?.word}
      </h2>
      <h2>
        State Object : {raw.tid},{raw.name}
      </h2>
    </div>
  );
}

方案三：函数式更新确保状态依赖（适用于多步更新场景） #

如果确实需要分多次更新raw，要使用函数式更新确保每次更新都基于最新的状态，但这种场景下合并更新更高效，仅作参考：

function change() {
  const currentItem = target[count];
  if (!currentItem) return;
  setRaw(prev => ({ ...prev, tid: currentItem.id }));
  setRaw(prev => ({ ...prev, name: currentItem.word }));
  // 插入操作依然需要用临时变量或useEffect，不能直接打印raw
  setCount(prev => prev + 1);
}

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