Question

我对React如何使用useReducer处理更新状态还不清楚。

我有这些代码如下：

function userSelectionsReducer(state, action) {
    switch (action.type) {
        case 'editQtt':
            state[action.data.index].quantity = action.data.value;
            return state;
            break;
        case 'editDate':
            return state.map((item, index) =>
                index == action.data.index ?
                { ...item, deliveryDate: action.data.value} :
                item
            );
            break;
    }
}
const [userSelections, dispatchUserSelection] = useReducer(userSelectionsReducer, {});

useEffect(() => {
   console.log(userSelections) //will reach here with 'editDate' but not 'editQtt'
}, [userSelections])

const logState = () => {
   console.log(userSelections) //will log new value of 'state' after dispatching 'editQtt'
}
....
<button onClick={logState}>Log selections</button>

如您所见，我编写的第一个操作是使“状态”值直接更新，而在另一个操作中，我返回具有更新值的新状态实例。据我所知（不确定），“状态”是不可变的，不能直接更改，但是正如我在第一个操作中观察到的那样，“状态”值实际上已更改，但不会触发组件上的重新渲染调用useEffect的回调函数。但是，当我使用专用按钮手动登录时，它会显示更新的值。你们知道它是如何工作的吗？谢谢！

有关使用useReducer更新状态的问题

0 个答案: