API调用后useState状态未更新，如何实现状态更新后再路由？

核心问题 #

1. setOpenedFeedback 是异步更新操作，await getFeedbackById 仅等待API请求完成，不会等待状态更新完成，导致路由跳转后目标组件拿到的仍是初始旧状态。
2. 需将状态维护在Context Provider中，才能保证跨组件的状态同步共享。

步骤1：把状态迁移到Context Provider中 #

将openedFeedback状态和请求方法统一放到FilterContext的Provider里，确保所有消费Context的组件能获取到最新状态：

// FilterContext.tsx
import { createContext, useState, ReactNode } from 'react';
import { ProductRequest } from './types';

type FilterContextType = {
  openedFeedback: ProductRequest;
  setOpenedFeedback: React.Dispatch<React.SetStateAction<ProductRequest>>;
  getFeedbackById: (id: number) => Promise<void>;
};

const initialFeedback: ProductRequest = {
  id: 0, title: '', category: '', upvotes: 0, status: '', description: '', comments: []
};

export const FilterContext = createContext<FilterContextType>({
  openedFeedback: initialFeedback,
  setOpenedFeedback: () => {},
  getFeedbackById: async () => {}
});

export const FilterProvider = ({ children }: { children: ReactNode }) => {
  const [openedFeedback, setOpenedFeedback] = useState<ProductRequest>(initialFeedback);
  const host = '你的实际API域名'; // 替换为真实host

  const getFeedbackById = async (id: number) => {
    const url = `${host}api/product-requests/${id}`;
    const response = await fetch(url, {
      method: 'GET',
      mode: 'cors',
      headers: { 'Content-Type': 'application/json' }
    });
    const json = await response.json();
    setOpenedFeedback(json);
  };

  return (
    <FilterContext.Provider value={{ openedFeedback, setOpenedFeedback, getFeedbackById }}>
      {children}
    </FilterContext.Provider>
  );
};

步骤2：修改路由跳转逻辑，等待状态更新后再跳转 #

利用useEffect监听状态变化，确保状态更新完成后再执行路由跳转：

// 触发跳转的组件
import { useContext, useEffect, useState } from 'react';
import { FilterContext } from '@/app/context/filters/FilterContext';
import { useRouter } from 'next/router';

const SomeComponent = () => {
  const { getFeedbackById, openedFeedback } = useContext(FilterContext);
  const router = useRouter();
  const [targetId, setTargetId] = useState<number | null>(null);

  // 监听目标ID变化，执行API请求
  useEffect(() => {
    if (targetId) {
      getFeedbackById(targetId);
    }
  }, [targetId, getFeedbackById]);

  // 监听状态更新，确认状态匹配目标ID后跳转
  useEffect(() => {
    if (targetId && openedFeedback.id === targetId) {
      router.push('/components/feedback-detail');
      setTargetId(null); // 重置ID，避免重复触发跳转
    }
  }, [openedFeedback, targetId, router]);

  const openFeedback = (id: number) => {
    setTargetId(id);
  };

  return (
    <button onClick={() => openFeedback(1)}>打开反馈详情</button>
  );
};

步骤3：优化目标组件的状态使用 #

目标组件无需额外维护本地状态，直接使用Context中的openedFeedback即可，React会自动监听变化并重新渲染：

// FeedbackDetails.tsx
import Link from 'next/link';
import React, { useContext } from 'react';
import './FeedbackDetails.scss';
import FeedbackContent from '../FeedbackContent';
import FilterContext from '@/app/context/filters/FilterContext';

export default function FeedbackDetails() {
  const { openedFeedback } = useContext(FilterContext);

  // 状态未加载完成时显示加载提示
  if (openedFeedback.id === 0) {
    return <div>加载中...</div>;
  }

  return (
    <div className='outer-container'>
      <div className="inner-container">
        <div className="btns-container">
          <Link href='/' className='back-btn'>
            <svg width="7" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L2 5l4-4" stroke="#4661E6" strokeWidth="2" fill="none" fillRule="evenodd" /></svg>
            <span>返回</span>
          </Link>
          <Link href='/' className='edit-btn'>编辑反馈</Link>
        </div>
        <div className="content-container">
          <FeedbackContent 
            id={openedFeedback.id} 
            title={openedFeedback.title} 
            category={openedFeedback.category} 
            upvotes={openedFeedback.upvotes} 
            comments={openedFeedback.comments} 
            description={openedFeedback.description} 
            status={openedFeedback.status} 
          />
        </div>
      </div>   
    </div>
  );
}

额外注意事项 #

• 确保应用根组件（如layout.tsx或_app.tsx）包裹了FilterProvider，否则Context无法生效：

// layout.tsx
import { FilterProvider } from '@/app/context/filters/FilterContext';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <FilterProvider>{children}</FilterProvider>
      </body>
    </html>
  );
}

• 确认API返回的数据结构与ProductRequest类型完全匹配，避免因类型不兼容导致状态更新异常。

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