Javascript 使用减速机设置上下文时钩子调用无效

我正在尝试设置一个

AppProvider

组件，该组件使用上下文和缩减器来处理我的应用程序的全局数据。但是，在

AppProvider

中调用的

useReducer

钩子似乎导致了错误。我已经读过了，就我所知，我没有违反上面列出的任何规则

从'lodash'导入{merge}；
从“React”导入React、{useReducer、Reducer、useContext、Dispatch}；
导出接口AppState{
材料：细绳；
}
const initialState:AppState={stuff:'something'}；
const AppStateContext=React.createContext（initialState）；
导出类型操作={type:'SET_STATE'；状态：部分

软件包版本：


react@17.0.2
（唯一安装的版本）
反应-dom@17.0.2
反应-scripts@4.0.3
这个问题实际上是由于安装了两个不同的
react
软件包引起的。该应用程序是monorepo的一部分，并将
react dom
软件包吊起来。修复方法是简单地防止吊运
react
和
react dom
：

在
package.json
中：

{
“工作区”：{
“包”：[
“包/*”
],
“无升降机”：[
“***/反应”，
“**/react/**”，
“**/react dom”，
“**/react dom/**”，
]
}
}
查看此代码可能会有帮助您如何使用
应用程序提供程序
？有问题的代码可能在您使用
的地方。您可以显示此代码吗？我正在一个新的create react应用程序的
应用程序
组件中使用它。编辑以添加
应用程序
组件。使用
{children children:react node}
并且您可以删除eslint禁用
import queryString from 'query-string';
import React from 'react';

import { AppProvider } from './app/AppProvider';
import logo from './logo.svg';
import './App.css';

function App() {
  const { stuff } = queryString.parse(document.location.search);

  if (typeof stuff !== 'string') {
    return (
      <div>
        Missing stuff parameter.
      </div>
    );
  }

  return (
    <AppProvider stuff={stuff}>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    </AppProvider>
  );
}

export default App;