React使用Easy Peasy状态管理时无法更新state的问题如何解决

核心问题原因 #

• Easy Peasy 提供的 action 仅支持同步状态修改，不支持在内部执行异步逻辑（如axios请求），异步操作需要使用官方提供的 thunk 声明。
• useEffect 未配置依赖数组，会在组件每次渲染时重复触发请求，容易引发死循环。
• 调用getVideo后立刻打印video属于时机错误，异步请求还未完成时拿到的永远是旧状态，不能以此判断状态是否更新。

修复后的代码 #

model.js #

import axios from "axios"
import { action, thunk } from "easy-peasy" // 导入thunk

export default {
    // 注意：你后续赋值的是单条视频对象，初始值建议从数组改为null/空对象，避免类型不匹配
    video: null,

    // 同步action：仅负责修改状态
    setVideo: action((state, payload) => {
        state.video = payload
    }),

    // 异步thunk：处理请求逻辑，拿到结果后调用同步action更新状态
    getVideo: thunk(async (actions, id) => {
        try {
            const res = await axios.get(`http://localhost:8000/videos/${id}`)
            actions.setVideo(res.data[0])
        } catch (err) {
            console.log(err)
        }
    })
}

Main.js #

import React from 'react'
import { useEffect } from 'react'
import { useStore, useStoreActions } from 'easy-peasy'

const Watch = () => {
    const video = useStore(state => state.video)
    const getVideo = useStoreActions(actions => actions.getVideo)

    // 只在组件挂载时执行一次请求，空依赖数组不要漏
    useEffect(() => {
        getVideo(1)
    }, [getVideo])

    // 监听video变化，确认状态更新
    useEffect(() => {
        console.log('video状态已更新：', video)
    }, [video])

    return (
        <>{video && <div>{video.title}</div>}</>
    )
}

验证方式 #

修改完成后启动项目，打开控制台可以看到请求完成后会打印最新的video值，组件渲染时也可以正常读取video的属性。

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