React：Redux的ID无法立即同步到paymentData状态的解决咨询

React的状态更新是异步的，调用setPaymentData后，组件不会立刻重新渲染，paymentData变量依然保持更新前的值。所以你紧接着调用PaymentServices.create(paymentData)时，传入的还是没有user_id的旧数据。

有两种常用的解决方式：

方式一：直接使用新创建的数据对象 #

既然你已经通过函数式更新生成了新的payment数据，不如直接把这个新对象存下来，同时用于更新状态和发送请求：

const onFinish = async (values) => {
    setLoading(true)
    setErrorMessage("")
    setValidationError("")
    try {
        const res = await UserServices.validatePin(values)
        if (res.data.msg == "success") {
            setLoading(false)
            form.resetFields();
            // 先创建包含user_id的新数据对象
            const newPaymentData = {
                ...paymentData,
                user_id: currentUser.id,
            }
            // 更新状态
            setPaymentData(newPaymentData)
            // 直接用新对象发送请求
            PaymentServices.create(newPaymentData)
        }
    } catch (error) {
        if (error) {
            setErrorMessage(error.response.data.data)
            if (error.response.data.errors) {
                setValidationError(error.response.data.errors)
            }
        } else {
            setErrorMessage("Network Error. Try Again.")
        }
    } finally {
        setLoading(false)
        form.resetFields();
    }
};

方式二：用useEffect监听状态变化 #

如果你的业务逻辑需要等待状态真正更新后再执行请求，可以使用useEffect监听paymentData的变化，当它包含user_id时触发请求：

import { useEffect } from 'react';

const ValidatePin = ({ setPaymentData, paymentData, ...restProps }) => {
    // ...其他状态和逻辑

    useEffect(() => {
        // 只有当paymentData存在且包含user_id时才发送请求
        if (paymentData && paymentData.user_id) {
            PaymentServices.create(paymentData)
            // 可选：添加标志位避免重复请求，比如设置hasSentRequest状态
        }
    }, [paymentData])

    const onFinish = async (values) => {
        setLoading(true)
        setErrorMessage("")
        setValidationError("")
        try {
            const res = await UserServices.validatePin(values)
            if (res.data.msg == "success") {
                setLoading(false)
                form.resetFields();
                setPaymentData(prevState => ({
                    ...prevState,
                    user_id: currentUser.id,
                }))
            }
        } catch (error) {
            if (error) {
                setErrorMessage(error.response.data.data)
                if (error.response.data.errors) {
                    setValidationError(error.response.data.errors)
                }
            } else {
                setErrorMessage("Network Error. Try Again.")
            }
        } finally {
            setLoading(false)
            form.resetFields();
        }
    };

    // ...其他代码
}

• 方式一更直接，适合不需要等待状态渲染完成就发送请求的场景
• 方式二适合必须等待状态更新后再执行后续逻辑的场景，但要注意添加判断条件，避免重复触发请求

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