Reactjs 如何在React Context API钩子中访问多个上下文的分派方法？

我有一个具有多个上下文的应用程序：

class App extends Component {
  render() {
    return (
      <SettingsProvider>
        <ContentProvider>
          <Component />
        </ContentProvider>
      </SettingsProvider>
    );
  }
}

---

我错过了什么

我认为您应该重命名dispatch变量

    function SettingsProvider({ children, userSettings }) {
       const [state, dispatchSettings] = useReducer(
       reducer,
       _.merge(defaultSettings, JSON.parse(userSettings)),
    );

    return (
      <SettingsContext.Provider value={{ state, dispatchSettings }}> 
          {children} 
      </SettingsContext.Provider>
          );

函数设置Provider（{children，userSettings}）{
const[state，dispatchSettings]=useReducer(
减速器，
_.merge（defaultSettings，JSON.parse（userSettings）），
);
返回(
{儿童}
);

---

同样的方法也将用于ContentProvider reducer。

您可以使用重命名和对象分解

const { dispatch } = useContext(DefaultContext);
const { dispatch: altDispatch } = useContext(AltContext);

---

DefaultContext的Dispatch现在可以通过

Dispatch

访问，AltContext可以通过

altDispatch

访问。我知道可能的答案是：将组件缩减为更小的部分并重新安排存储，因此每个组件只需要一个存储。但是，如何访问Dispatch reducer以获得两个或更多的反应组分中的矿石？

    function SettingsProvider({ children, userSettings }) {
       const [state, dispatchSettings] = useReducer(
       reducer,
       _.merge(defaultSettings, JSON.parse(userSettings)),
    );

    return (
      <SettingsContext.Provider value={{ state, dispatchSettings }}> 
          {children} 
      </SettingsContext.Provider>
          );

const { dispatch } = useContext(DefaultContext);
const { dispatch: altDispatch } = useContext(AltContext);