如何在useState/use-between设置状态后执行函数并获取状态值？

核心问题分析 #

你遇到的本质问题是：useState（包括use-between共享的状态）的更新是异步批量执行的，在异步函数中调用setState后立刻读取状态，只能拿到更新前的旧值。如果必须依赖共享状态传递值，需要遵循React的状态更新机制来触发后续逻辑；如果只是单纯的异步函数依赖执行，完全可以绕开状态，直接通过Promise传递值。

方案1：绕开状态，直接用Promise链式传递值（最简洁） #

如果你的需求只是让三个异步函数按依赖顺序执行，没必要把中间hash存在组件状态里，直接通过函数返回值传递依赖即可，彻底避开useState异步更新的问题。

// 第一个异步函数：获取初始hash
async function getInitialHash() {
  const res = await fetch('/api/get-hash');
  return res.text();
}

// 第二个异步函数：接收初始hash，处理得到finalHash
async function processHash(initialHash) {
  const res = await fetch(`/api/process-hash?hash=${initialHash}`);
  return res.text();
}

// 第三个函数：接收finalHash执行后续逻辑
function handleFinalHash(finalHash) {
  console.log('最终结果:', finalHash);
  // 你的业务逻辑
}

// 统一执行流程
async function runAllTasks() {
  try {
    const initialHash = await getInitialHash();
    const finalHash = await processHash(initialHash);
    handleFinalHash(finalHash);
  } catch (err) {
    console.error('执行出错:', err);
  }
}

// 在组件中触发执行
useEffect(() => {
  runAllTasks();
}, []);

方案2：用useEffect监听共享状态变化（符合React机制） #

如果业务必须把hash存在use-between的共享状态中，就用useEffect监听状态的变化，确保前一个状态更新完成后再执行下一个函数。

第一步：定义共享状态hooks

// useSharedHash.js
import { useState } from 'react';
import { useBetween } from 'use-between';

const useSharedHash = () => {
  const [initialHash, setInitialHash] = useState(null);
  const [finalHash, setFinalHash] = useState(null);

  return {
    initialHash,
    setInitialHash,
    finalHash,
    setFinalHash
  };
};

export const useSharedHashState = () => useBetween(useSharedHash);

第二步：在组件中按状态触发函数

import { useSharedHashState } from './useSharedHash';
import { useEffect } from 'react';

async function fetchInitialHash(setInitialHash) {
  const res = await fetch('/api/get-hash');
  const hash = await res.text();
  setInitialHash(hash);
}

async function fetchFinalHash(initialHash) {
  const res = await fetch(`/api/process-hash?hash=${initialHash}`);
  return res.text();
}

function handleFinalHash(finalHash) {
  console.log('最终结果:', finalHash);
}

function YourComponent() {
  const { initialHash, setInitialHash, finalHash, setFinalHash } = useSharedHashState();

  // 第一步：获取初始hash并更新状态
  useEffect(() => {
    fetchInitialHash(setInitialHash);
  }, []);

  // 第二步：监听初始hash变化，执行处理函数
  useEffect(() => {
    if (!initialHash) return;

    async function process() {
      const hash = await fetchFinalHash(initialHash);
      setFinalHash(hash);
    }
    process();
  }, [initialHash]);

  // 第三步：监听finalHash变化，执行最终逻辑
  useEffect(() => {
    if (!finalHash) return;
    handleFinalHash(finalHash);
  }, [finalHash]);

  return <div>处理中...</div>;
}

方案3：自定义带回调的状态更新（减少useEffect） #

如果不想写多个useEffect，可以给共享状态的setState扩展回调功能，利用useState的函数式更新特性，在状态更新完成后立刻触发后续逻辑。

第一步：扩展共享状态hooks

// useSharedHash.js
import { useState, useCallback } from 'react';
import { useBetween } from 'use-between';

const useSharedHash = () => {
  const [initialHash, setInitialHash] = useState(null);

  // 自定义带回调的setInitialHash
  const setInitialHashWithCallback = useCallback((newHash, callback) => {
    setInitialHash(prev => {
      const updatedHash = typeof newHash === 'function' ? newHash(prev) : newHash;
      callback?.(updatedHash);
      return updatedHash;
    });
  }, []);

  return {
    initialHash,
    setInitialHashWithCallback
  };
};

export const useSharedHashState = () => useBetween(useSharedHash);

第二步：在组件中调用

import { useSharedHashState } from './useSharedHash';
import { useEffect } from 'react';

async function fetchInitialHash(setInitialHashWithCallback) {
  const res = await fetch('/api/get-hash');
  const hash = await res.text();
  // 设置状态后立刻执行回调，拿到最新的hash值
  setInitialHashWithCallback(hash, async (updatedHash) => {
    const finalHash = await fetchFinalHash(updatedHash);
    handleFinalHash(finalHash);
  });
}

async function fetchFinalHash(initialHash) {
  const res = await fetch(`/api/process-hash?hash=${initialHash}`);
  return res.text();
}

function handleFinalHash(finalHash) {
  console.log('最终结果:', finalHash);
}

function YourComponent() {
  const { setInitialHashWithCallback } = useSharedHashState();

  useEffect(() => {
    fetchInitialHash(setInitialHashWithCallback);
  }, []);

  return <div>处理中...</div>;
}

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