React状态未更新及「已卸载组件无法更新状态」错误求助

1. 控制台打印data为undefined的原因及修复 #

问题点： #

• 初始state缺失isLoading：constructor里只初始化了data: []，未定义isLoading，导致this.state.isLoading初始为undefined，!this.state.isLoading会被判定为true，此时fetch仍处于异步请求阶段，data还是初始空数组；若你看到undefined，也可能是serachByCustomerId为空，导致请求URL拼接错误。
• 同步代码无法获取异步更新的state：setState是异步操作，你在fetch之后立刻执行console.log("data after search", this.state.data)，此时state尚未更新，自然拿不到最新数据。

修复： #

• 先在constructor里初始化isLoading状态：

constructor(props) {
    super(props);
    this.state = {
        data: [],
        isLoading: false // 初始化isLoading为false
    };
}

• 把打印数据的逻辑放到setState的回调中（setState完成后会执行该回调），同时添加请求错误处理：

fetch(url)
    .then((res) => {
        // 先检查请求是否成功
        if (!res.ok) throw new Error('请求失败');
        return res.json();
    })
    .then((data) => {
        this.setState({ data: data, isLoading: false }, () => {
            // setState完成后打印数据
            console.log("data after search", this.state.data);
        });
    })
    .catch(err => {
        // 处理请求错误，比如网络问题、接口报错
        console.error('请求出错:', err);
        this.setState({ isLoading: false });
    });

• 检查serachByCustomerId是否正确获取，确认跳转时props.location.state是否传递了有效partyID：

const serachByCustomerId = this.props.location.state;
console.log('serachByCustomerId:', serachByCustomerId); // 确认参数是否正确

2. "Can't perform a React state update on an unmounted component"错误修复 #

问题点： #

该错误是因为fetch异步请求未完成时，组件已被卸载（比如用户快速跳转页面），此时setState试图更新已不存在的组件状态，从而抛出警告。

修复： #

添加标识位，在组件卸载时标记，阻止后续setState执行：

class CalcForm extends React.Component {
    _isMounted = false; // 添加组件挂载状态标识

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            isLoading: false
        };
    }

    componentDidMount() {
        this._isMounted = true; // 组件挂载后设为true
        this.setState({ isLoading: true });
        const serachByCustomerId = this.props.location.state;
        
        // 处理参数为空的情况
        if (!serachByCustomerId) {
            console.error('缺少partyID参数');
            this.setState({ isLoading: false });
            return;
        }
        
        const url = "<MYURL>/api/Customer/" + serachByCustomerId;

        console.log("URL Being used ", url);
        fetch(url)
            .then((res) => {
                if (!res.ok) throw new Error('请求失败');
                return res.json();
            })
            .then((data) => {
                // 仅组件挂载时更新状态
                if (this._isMounted) {
                    this.setState({ data: data, isLoading: false }, () => {
                        console.log("data after search", this.state.data);
                    });
                }
            })
            .catch(err => {
                console.error('请求出错:', err);
                if (this._isMounted) {
                    this.setState({ isLoading: false });
                }
            });
    }

    componentWillUnmount() {
        this._isMounted = false; // 组件卸载时设为false
    }

    // ... 其余代码不变
}

3. 额外优化点 #

• 在render中展示data内容，替代当前的hi占位：

render() {
    const { data, isLoading } = this.state;
    if (isLoading) {
        return (
            <div className="pageLoading">
                <p>Loading...</p>
                <FadeLoader size={150} color="#2d8259" loading={isLoading} />
            </div>
        );
    }

    return (
        <div>
            {data.length > 0 ? (
                <ul>
                    {data.map(item => (
                        <li key={item.id}>{item.name}</li> // 替换为你的实际数据字段
                    ))}
                </ul>
            ) : (
                <p>暂无用户数据</p>
            )}
        </div>
    );
}

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