将 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());