React中useReducer dispatch值未正确更新，contacts始终为undefined求助

问题解决方案 #

你遇到的问题是低级拼写错误导致的，具体修复步骤如下：

• 第一步：修正dispatch传递的action参数拼写
  你在setContacts方法中给action定义的参数名为payoad，但reducer中读取的是action.payload，字段名不匹配导致无法获取到正确的联系人列表，修改setContacts方法中的dispatch代码即可：

const setContacts = (contactList) => {
    console.log(contactList);
    dispatch({
        type: SET_CONTACT_LIST,
        payload: contactList // 此处原来拼写为payoad，修正为正确的payload
    })
}

• 第二步（可选优化）：给reducer添加default分支
  当前你的reducer没有处理未匹配的action类型，遇到未定义的action时会返回undefined，导致整个state被清空。建议补充default分支返回原有state：

const chatReducer = (state, action) => {
    console.log(action);
    console.log(state);
    switch(action.type) {
        case TOGGLE_CHAT:
            return {
                ...state,
                isChatPage: action.payload
            }
        case SET_LOGGED_USER:
            return {
                ...state,
                loggedInUser: action.payload
            }
        case SET_CONTACT_LIST:
            return {
                ...state,
                contacts: action.payload
            }
        // 补充default分支
        default:
            return state
    }
}

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