javascript - 在 reducer 函数中使用 axios 时，状态更新一直等到 promise 解决

Question

const initialState = {
  data: []
}

function reducer (state, action) {
    switch(action.type) {
        case 'case':
            return (
                axios.get('/api').then(
                    // res => console.log(res)
                    // res => console.log(res.data)
                    res => ({ data: res.data })
                )
            )
        default:
            return state    
    }
}


export default function Component() {
    const [state, dispatch] = useReducer(reducer, initialState)
 
    console.log(state)
    console.log(state.data)

    return (
        <button onClick={() => dispatch({ type: 'case' })}>button</button>
    )
}

在我的代码中，我的错误是什么？我得到Promise {<pending>}并undefined在组件内的两行console.log之后。state在控制台上打印之前似乎没有更新状态。如何解决？

标签： javascriptreactjsaxios