React组件中getData与sendData调用的状态更新同步问题

你的核心问题是React状态更新的异步性导致：首次点击按钮时，await getData()完成后，setData的状态更新还未生效，此时调用sendData拿到的仍是旧的data值。下面提供两种不依赖getData返回数据传参的解决方案：

方案1：使用useRef存储最新数据 #

利用useRef的可变特性（更新不会触发重渲染，且同步生效），在getData中同步更新ref的内容，让sendData直接读取ref的最新值：

import { useState, useRef } from "react";

export function App() {
  const [data, setData] = useState(null);
  const dataRef = useRef(null);

  const getData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const result = await response.json();
    setData(result);
    dataRef.current = result; // 同步更新ref，确保sendData能拿到最新值
  }

  const sendData = () => {
    console.log(dataRef.current); // 直接从ref读取最新数据
    // 执行数据发送操作
  }

  const handleClick = async () => {
    if (!data) {
      await getData();
    }
    sendData();
  }

  return (
    <button onClick={handleClick}>Click me!</button>
  );
}

这种方案逻辑简洁，不需要额外的状态监听，直接通过ref绕过React状态更新的异步延迟问题。

方案2：使用触发状态配合useEffect #

通过新增一个shouldSend状态标记，控制useEffect仅在按钮点击后、且data更新完成时执行sendData：

import { useState, useEffect } from "react";

export function App() {
  const [data, setData] = useState(null);
  const [shouldSend, setShouldSend] = useState(false);

  const getData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos');
    const result = await response.json();
    setData(result);
  }

  const sendData = () => {
    console.log(data);
    // 执行数据发送操作
    setShouldSend(false); // 重置触发状态，避免重复执行
  }

  const handleClick = async () => {
    if (!data) {
      await getData();
    }
    setShouldSend(true); // 标记需要执行sendData
  }

  useEffect(() => {
    // 仅当触发标记为true且data存在时，执行sendData
    if (shouldSend && data) {
      sendData();
    }
  }, [shouldSend, data]);

  return (
    <button onClick={handleClick}>Click me!</button>
  );
}

这种方案通过useEffect监听data和shouldSend的变化，确保sendData仅在按钮点击触发后、且data更新完成时执行，避免了自动触发的问题。

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