将 React 上下文恢复到默认状态

Question

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

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

使用 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());

Answer 2

这个

case RESET_STATE: {
      return {
        state: defaultState
      };
    }

应该是：

case RESET_STATE: {
      return {
       ...defaultState
      };
    }

在您的上下文中没有名为 state 的对象

将 React 上下文恢复到默认状态

Restoring a React Context to its Default State

javascript

reactjs

react-context