为什么React Hook初始化早于Redux props加载导致状态赋值异常？

问题根因 #

1. 异步请求时序问题：reduxActionLoadData是Redux Thunk异步请求，你代码里既没有正确执行该函数（缺少调用括号），就算执行了，异步请求未完成时立刻读取reduxProp的值还是初始空值，赋值自然为空。
2. useEffect依赖错误：useEffect依赖数组为空，只会在组件挂载时仅执行1次，后续Redux加载完成reduxProp更新后不会触发重新赋值本地state。
3. 基础语法错误：未声明t2对应的state、mapDispatchToProps赋值语法错误、export语法错误。

修复方案 #

按以下步骤修改即可解决：

• 正确调用异步加载action，补全基础语法错误
• 在useEffect依赖中添加reduxProp.t1和reduxProp.t2，监听Redux返回值的变化
• 增加判断逻辑，仅在Redux返回有效初始值、且本地state未被用户修改时才赋值，避免覆盖用户输入内容

修复后代码示例 #

import { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
// 引入你自己的action
import { reduxActionLoadDataAction } from '你的action路径'

const MyComponent = (props) => {
    const { reduxProp, reduxActionLoadData } = props
    // 补全t2的state声明
    const [t1, setT1] = useState('')
    const [t2, setT2] = useState('')
    
    useEffect( () => {
        // 正确调用加载数据的action
        reduxActionLoadData()
    }, [reduxActionLoadData])

    // 单独监听reduxProp的变化，给本地state赋值
    useEffect(() => {
        // 加判断：只有redux有值、且本地state还是初始空值的时候才赋值，避免覆盖用户输入
        if(reduxProp?.t1 && !t1) {
            setT1(reduxProp.t1)
        }
        if(reduxProp?.t2 && !t2) {
            setT2(reduxProp.t2)
        }
    }, [reduxProp?.t1, reduxProp?.t2, t1, t2])

    return (
        <div>
           <input value={t1} onChange={ (e) => { setT1(e.target.value) } } />
           <input value={t2} onChange={ (e) => { setT2(e.target.value) } } />
        </div>
     )
}

const mapStateToProps = (state) => ({
    reduxProp: state.reduxProp
})

const mapDispatchToProps = (dispatch) => ({
    // 修正bindActionCreators拼写和赋值语法
    reduxActionLoadData: bindActionCreators(reduxActionLoadDataAction, dispatch)
})
// 修正export语法
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

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