API调用数据库后上下文不更新答案

【问题标题】：Context not updating after API call to databaseAPI调用数据库后上下文不更新
【发布时间】：2020-11-01 13:34:43
【问题描述】：

我在上下文中使用useReducer，它通过 API 调用 mongoDB 来更改数据库。

当在集合organisation 中创建一个新文档时，我会发回一个带有刚刚创建的新组织的对象。我试图让它做的是在新组织成功创建后更新上下文，以便 React 重新呈现并且用户可以看到最新的信息。

我成功地创建了一个新的organisation，但是在我刷新应用程序之前它们不会显示。

任何人都可以看到我哪里出错了，以便我可以使用新的 organisation 重新渲染 React 吗？

后端

app.post('/api/organisations', requireLogin, async (req, res) => {
    try {
        const { organisationName, organisationUsers } = req.body
        const parsedUsers = organisationUsers.split(',').filter(el => el.length > 0).map(el => el.replace(/ /g, '')).concat([req.user.email])
        const organisation = await new Organisation({
            organisationName,
            organisationUsers: parsedUsers,
            organisationOwner: req.user.email
        }).save()
        res.send(organisation)
    } catch (err) {
        console.log(err)
        res.status(400)
        res.send({ error: err })
        return
    }
})

前端（上下文）

const initState = []

const organisationsReducer = (state, action) => {
    const updatedState = state.filter(org => org._id !== action.payload._id)
    switch (action.type) {
        case 'CREATE_SUCCESS':
            return [...state, ...action.payload]
        case 'CREATE_ERROR':
            console.error(action.payload)
        case 'FETCH_SUCCESS':
            return [...state, ...action.payload]
        case 'FETCH_ERROR':
            return [...state]
        case 'UPDATE_SUCCESS':
            return [...updatedState, action.payload]
        case 'UPDATE_ERROR':
            console.error(action.payload)
            return [...state]
        case 'DELETE_SUCCESS':
            return [...updatedState]
        case 'DELETE_ERROR':
            console.error(action.payload)
            return [...state]
        default:
            return state
    }

const createOrganisation = async (formData) => {
        try {
            const req = await axios.post('/api/organisations', formData)
            organisationsDispatch({action: 'CREATE_SUCCESS', payload: req.data})
        } catch (err) {
            organisationsDispatch({action: 'CREATE_ERROR', payload: err})
        }
}
const [organisations, organisationsDispatch] = useReducer(organisationsReducer, initState)

return (
    <OrganisationsContext.Provider value={{ organisations, updateOrganisation, editOrganisationUser, createOrganisation, deleteOrganisation }}>
        {children}
    </OrganisationsContext.Provider>
)

【问题讨论】：

标签： reactjs mongodb mongoose use-context

【解决方案1】：

我发现了问题——在调度函数中我使用的是动作而不是类型

【讨论】：