React Hook场景下如何将Redux的数组数据赋值给useState状态

算力阿峰

2026-10-15

问题原因

useState 初始值仅生效一次：useEffect中触发的fetch类action均为异步请求，组件首次渲染时请求尚未返回，Redux中对应的list_bank、list_customer_payor等字段均为初始空数组，此时useState用空值完成初始化。后续Redux请求完成、数据更新触发组件重渲染时，useState已经完成初始化，不会自动读取新的Redux值更新本地状态。
控制台打印为延迟求值特性：你看到的“打印时显示空数组、展开后有数据”是浏览器控制台的特性：打印引用类型（数组/对象）时，控制台仅保存引用指针，手动点击展开时才会读取当前内存中的最新值，本质上是打印时数据还未返回，展开时异步请求已经完成。

解决方案

方案1：监听Redux数据变化手动更新本地state

新增useEffect监听所有依赖的Redux列表字段，变化时重新生成数组更新本地state：

// 原有逻辑保持不变
const [data, setData] = useState(defaultArray) 

// 新增以下监听逻辑
useEffect(() => {
    const newArray = [
        {key:"0", customer:list_customer_payor, bank:list_bank, branch:"", checkNo:"", amount:"", remarks:list_remarks, checkDate:""},
        {key:"1", customer:list_customer_payor, bank:list_bank, branch:"", checkNo:"", amount:"", remarks:list_remarks, checkDate:""},
        {key:"2", customer:list_customer_payor, bank:list_bank, branch:"", checkNo:"", amount:"", remarks:list_remarks, checkDate:""},
        {key:"3", customer:list_customer_payor, bank:list_bank, branch:"", checkNo:"", amount:"", remarks:list_remarks, checkDate:""},
        {key:"4", customer:list_customer_payor, bank:list_bank, branch:"", checkNo:"", amount:"", remarks:list_remarks, checkDate:""}
    ]
    setData(newArray)
}, [list_bank, list_remarks, list_bank_accounts, list_customer_payor])