react不能用简单的方式更新状态

Question

model.js

import axios from "axios"
import { action } from "easy-peasy"

export default {
    video: [],

    // Actions
    getVideo: action((state, id) => {
            axios.get(`http://localhost:8000/videos/${id}`)
            .then(res => {
                state.video = res.data[0]
            })
            .catch(err => {
                console.log(err)
            })
    })
}

Main.js

import React from 'react'
import { useEffect, useState } 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)
        console.log(video)
    })

    return (
        <></>
    )

我刚开始用简单的方法，所以请容忍我.我不知道为什么状态没有被更新，我看到了一些示例代码，它以相同的方式更新状态，getVideo操作被调用，所以这不是问题，我如何解决这个问题？

Answer 1

useEffect(() => {
        getVideo(1)
        console.log(video)
    })

在这里，在console.log(video)完全执行后不会调用getVideo(1)。console.log显示相同的数据是很自然的。

你可以看到它实际上发生了如下变化。

 useEffect(() => {
            getVideo(1)
        })
    console.log(video)