React Hooks报错：无法在未挂载组件上更新状态的排查

核心问题点 #

1. 初始State类型不匹配
   你把orderDetails初始化为数组[]，但接口返回的data.order是对象（从JSX中访问transaction_reference_no等属性可以判断）。数组访问对象属性会得到undefined，这种类型不匹配会导致渲染逻辑异常，甚至触发组件提前卸载，进而引发state更新警告。

2. Mounted标志未在异步回调中检查
   你之前的代码只在调用FetchOrderDetails前判断了mounted状态，但请求是异步的——当请求完成时，组件可能已经卸载，此时执行setOrderDetails就会触发那个警告。之前的写法根本没在关键的setState步骤做检查。

3. 异步写法混乱+依赖项缺失
   混合使用async/await和then链式调用，逻辑易混淆；同时useEffect的依赖数组为空，会导致闭包捕获旧的transactionId或cookies.employeeId值，请求参数错误。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useCookies } from "react-cookie";

import * as Constants from "../Constants";
import HeaderTemplate from "../Templates/HeaderTemplate";

const OrderDetails = () => {
    const { transactionRefNo, transactionId } = useParams();
    const [cookies] = useCookies(["user"]);
    // 初始化为空对象，匹配接口返回的订单对象类型
    const [orderDetails, setOrderDetails] = useState({});
    // 增加加载状态，避免渲染未初始化的属性
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        let mounted = true;

        // 将请求函数移到useEffect内部，直接访问mounted变量
        const fetchOrderDetails = async () => {
            try {
                const options = {
                    employeeid: parseInt(cookies.employeeId),
                    transactionid: parseInt(transactionId),
                };

                const response = await fetch(`${Constants.API_ENDPOINT}/test/orderdetails`, {
                    method: "POST",
                    // 必须添加Content-Type，否则后端可能无法解析JSON请求体
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(options),
                });

                // 先检查组件是否仍挂载，再处理响应
                if (!mounted) return;

                const data = await response.json();
                setOrderDetails(data.order);
                setIsLoading(false);
            } catch (error) {
                console.error("获取订单详情失败:", error);
                if (mounted) {
                    setIsLoading(false);
                }
            }
        };

        fetchOrderDetails();

        // 组件卸载时标记为未挂载
        return () => {
            mounted = false;
        };
    }, [cookies.employeeId, transactionId]); // 添加完整依赖项，避免闭包问题

    // 加载状态下显示提示，避免渲染未初始化的内容
    if (isLoading) {
        return <div>加载中...</div>;
    }

    return (
        <div>
            <HeaderTemplate />
            <div className="panel panel-default mt-4">
                <div className="panel-heading">
                    <h6 className="panel-title">Order Details</h6>
                </div>
                <div className="panel-body">
                    <b>
                        <small>
                            {"Order #" + (orderDetails.transaction_reference_no || "N/A")}
                        </small>
                    </b>
                    <div className="row">
                        <div className="col-md-6">
                            <small>Port: {orderDetails.port || "N/A"}</small>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-md-6">
                            <small>
                                Type:{" "}
                                {orderDetails.transaction_type === "selling_stages"
                                    ? "Selling"
                                    : "Buying"}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};
export default OrderDetails;

关键修改说明 #

• 修正State初始值：把[]改为{}，和接口返回的对象类型一致，避免渲染时的属性访问错误。
• 正确使用Mounted标志：在请求完成、准备更新state前检查mounted状态，确保组件仍挂载时才执行setState。
• 统一异步写法：全程使用async/await，配合try/catch处理错误，逻辑更清晰。
• 添加加载状态：数据加载完成前显示提示，避免渲染未初始化的属性导致的页面异常。
• 完善依赖数组：把cookies.employeeId和transactionId加入依赖，确保useEffect能响应参数变化，避免闭包捕获旧值。
• 属性访问容错：给属性访问添加默认值（|| "N/A"），防止数据未加载完成时显示undefined。

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