Reactjs 从componentDidMount发出调用后，Redux接收道具延迟_Reactjs_Redux_Redux Thunk

Reactjs 从componentDidMount发出调用后，Redux接收道具延迟

reactjs redux

Reactjs 从componentDidMount发出调用后，Redux接收道具延迟,reactjs,redux,redux-thunk,Reactjs,Redux,Redux Thunk,收到数据后，状态不会立即更新 Accounts.js像这样 const initialState = { accounts : [], error:null } export function accountsReducer(state=initialState,action) { switch(action.type){ case FETCH_ACCOUNTS: return { ...stat

收到数据后，状态不会立即更新

Accounts.js像这样

const initialState = {
    accounts : [],
    error:null
}

export function accountsReducer(state=initialState,action) {

    switch(action.type){
        case FETCH_ACCOUNTS:
            return {
                ...state,
                accounts:action.accounts
            }
        default:
            return state
    }
}

类帐户扩展组件{
componentDidMount（）
{
this.props.dispatch（fetchAccountsAction（））
}
render（）{
const accInfo=this.props.accounts//未立即获取数据
返回(
)
}
}
const mapStateToProps=（state，ownProps）=>{
console.log（'state'，state）；
返回{
账户：国家账户
}
}
导出默认连接（MapStateTops）（帐户）

Action.js像这样

const initialState = {
    accounts : [],
    error:null
}

export function accountsReducer(state=initialState,action) {

    switch(action.type){
        case FETCH_ACCOUNTS:
            return {
                ...state,
                accounts:action.accounts
            }
        default:
            return state
    }
}

const fetchAccountsAction=（）=>{
返回异步（调度）=>{
const res=等待获取（url{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
“授权”：令牌，
},
正文：JSON.stringify（数据）
});
const data=await res.json（）
如果（数据）{
分派（获取帐户（数据））
}
}
}
导出函数获取帐户（帐户）
{
console.log（'accounts'，accounts）//我在这里获取数据
返回{
类型：获取帐户，
账户：账户
}
}

Reducer.js像这样

const initialState = {
    accounts : [],
    error:null
}

export function accountsReducer(state=initialState,action) {

    switch(action.type){
        case FETCH_ACCOUNTS:
            return {
                ...state,
                accounts:action.accounts
            }
        default:
            return state
    }
}

当

componentDidMount

发生时，由于API响应延迟，无法立即接收道具。在收到API的数据后，请您帮助访问道具

谢谢。

这里发生了什么：

调用cDM，调度操作

如果action creator是sync（只是一个普通操作+没有任何异步操作的直减速机），则状态将更新

render（）

发生在以前的道具上（旧状态）

redux的

store.subscribe（）

使包装器（由

connect

创建）重新计算所有

MapStateTrops

mapDispatchToProps

由于步骤3返回了不同的值，包装器使用新的

道具重新呈现组件


render（）
与新道具一起使用
事实上，您的动作创建者本质上是异步的，切换2和3与它们的位置。但无论如何，第一次渲染将使用旧的存储值
因此，您最好相应地处理它（比如检查某个对象是否不再是未定义的对象，或者使用全新的来避免“无法读取null的属性…”）
这里发生了什么：

调用cDM，调度操作