将 React Context 恢复到默认状态

Question

我有一个 React Context 的默认状态，如下所示：

export const defaultState: UsersState = {

  isModalOpen: false,

  isCancelRequest: false,

  companyId: 0,

  users: []

};

当它使用的模式被取消时，我想将状态清除回默认值。这有效：

    case RESET_STATE: {

      return {

        ...state,

        isModalOpen: false,

        isCancelRequest: false,

        companyId: 0,

        users: []

      };

    }

但这不会：

    case RESET_STATE: {

      return {

        state: defaultState

      };

    }

当上下文第一次被实例化时，这就是用户的样子：

users: Array[0]

但是当我使用后者的简化方法来重置状态时，它看起来像这样：

users: Array  (empty)

至少，这就是我在 React DevTools 中看到的。

为什么设置state为defaultState不恢复users为Array[0]？

Answer 1

这个case RESET_STATE: {      return {        state: defaultState      };    }应该：case RESET_STATE: {      return {       ...defaultState      };    }state在您的上下文中没有调用对象

Answer 2

使用defaultState代替{state: defaultState}像这样。    case RESET_STATE: {      return defaultState;    }教程const state = {    isModalOpen: true,    isCancelRequest: true,    companyId: 123,    users: ['1','2','3']};const defaultState: UsersState = {  isModalOpen: false,  isCancelRequest: false,  companyId: 0,  users: []};const getState1 = () => {  return {    ...state,    isModalOpen: false,    isCancelRequest: false,    companyId: 0,    users: []  };}const getState2 = () => {  return {    state: defaultState  };}const getState3 = () => {  return defaultState;}console.log('this is goal state: ', getState1());console.log('this is your state: ', getState2());console.log('this is my state: ', getState3());