Javascript 无法在React中分派两个操作，状态更新不正确

在一个组件中，我试图从两个不同的还原器分派两个不同的操作。他们正在更新我的应用程序中的不同状态。以下是组件的部分代码：

    onSubmit = e => {
        e.preventDefault()
        const food = {
            date: this.state.date,
            mealCategory: this.state.mealCategory
        }
        this.props.addFood(food) //from mapDispatch to props updates the food state, viewing in redux tools shows proper state for food
        const meal = this.props.food //comes from mapStateToProps 
        console.log(meal, 'in form') //logging this shows it's not the updated state I am expecting
        this.props.addMeal(meal) //trying to update state from food reducer to the meal reducer, meal reducer is not updated via redux tools
    }
.
.
...

const mapDispatchToProps = (dispatch) => ({
    addFood: food => dispatch(addFood(food)),
    addMeal: meal => dispatch(addMeal(meal))
})

const mapStateToProps = state => ({
    food: state.food
})

export default connect(mapStateToProps, mapDispatchToProps)(AddFoodForm)

当我检查redux工具时，我的食物状态显示正确。但是，将该状态添加到我的函数中的fine

const-fine=this.props.food

会显示一个状态，该状态不会随着调用this.props.addFood（food）而更新，该调用会从我的food reducer发送一个操作。我知道更新是异步的。如何正确更新状态

只是为了澄清一下，我的foodReducer负责抓取，并通过表单向foodReducer的状态添加其他属性。一旦按下submit按钮，我就拥有了状态以及我需要的所有属性。我想把最后的状态传给我的米尔斯基特。我不能使用food变量，因为它只是我想要的状态属性的子集。不确定，如果我完全理解你的建议

我的食品制造商案例：

case 'ADD_FOOD':
            {
                const { date, mealCategory } = action.payload
                const itemDetails = {
                    date,
                    mealCategory
                }
                return { ...state, ...itemDetails }
            }

const mealReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_MEAL': {
            console.log(action.payload);
            const meal  = action.payload
            console.log(meal);
            return [...state, meal]
        }
        default:
            return state
    }
}

这带来了我想通过mealReducer案例添加的最终状态：

case 'ADD_FOOD':
            {
                const { date, mealCategory } = action.payload
                const itemDetails = {
                    date,
                    mealCategory
                }
                return { ...state, ...itemDetails }
            }

const mealReducer = (state = [], action) => {
    switch (action.type) {
        case 'ADD_MEAL': {
            console.log(action.payload);
            const meal  = action.payload
            console.log(meal);
            return [...state, meal]
        }
        default:
            return state
    }
}

---

根据你的评论，我想出了一个解决办法。我将addFood操作导入到膳食操作文件中，并使用Thunk获取调用addFood操作的状态

export const addFoodToMeal = (food) => {
    return (dispatch, getState) => {
        dispatch(addFood(food))
        const meal = getState().food
        return dispatch(addMeal(meal))
    }
}

---

这回答了你的问题吗？你好，Emile，我怀疑状态是异步更新的，但我不知道如何使用回调调用它，我已经研究了redux thunk以返回一个承诺，但是编写代码使其有意义有点困难。将使用更新的值调用呈现函数，所以你真的不需要在

onSubmit

中担心它。如果确实需要在那里添加一顿饭，直接使用

food

变量，但老实说，这应该在商店逻辑中完成。“foodReducer负责抓取”减量器不应该有任何副作用，因此应该转移到商店操作逻辑中。在相同的

addFood

操作逻辑中，在发生一些API调用时，在响应成功时，直接从那里调用您的

addFood

操作。React组件应该只关心呈现，而不应该实现所有业务逻辑。Redux操作是同步的。如果您想要异步，请使用redux thunk。这个问题非常不清楚，但是如果您希望

const-mein=this.props.food

成为

this.props.addFood（food）

的结果，则不能在相同的渲染中执行此操作

此.props.food

将在下一次渲染中更新。创建一个新的redux操作，将两个操作的逻辑结合起来，这样做更有意义。