我找不到罪魁祸首在哪里。我试着调试它，但找不到真正的错误：
无法读取null的属性(读取"useContext"(&；js:209警告：钩子调用无效。挂钩只能在函数组件的主体内部调用。这可能会发生原因如下：
- React和渲染器的版本可能不匹配(例如React DOM(
- 你可能违反了胡克规则
- 同一应用程序中可能有多个React副本
App.js
function App() {
return (
<React.Fragment>
<Counter/>
</React.Fragment>
);
}
export default App;
index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider context={StoreContext} store={Store()}>
<App />
</Provider>
);
reportWebVitals();
CounterReducer.js
const CounterReducer = (state = { count: 0 } , action) => {
switch (action.type) {
case handleDencrement:
return state.count - 1
case handleIncrement:
return state.count + 1
default:
return state
}
}
export default CounterReducer;
context.js
const StoreContext = React.createContext();
export default StoreContext ;
Store.js
const Store = () => {
const store = useStore(CounterReducer);
return store
}
export default Store;
types.js
export const handleIncrement = 'handleIncrement' ;
export const handleDencrement = 'handleDencrement';
计数器.js
const Counter = () => {
const [count, setcount] = useState(0);
const handleIncrement = () => {
setcount(count + 1);
}
const handleDencrement = () => {
setcount(count - 1);
}
return (
<div>
<center>
<h1>Redux</h1>
<h1>{count}</h1>
<button className="btn btn-primary" onClick={handleIncrement}>Increment</button>
<button className="btn btn-warning" onClick={handleDencrement}>decrement</button>
</center>
</div>
);
}
export default Counter;
Next.js只需使用"Ctrl+C"停止服务器，就解决了我的问题。并使用"npm run dev"重新启动服务器。希望这能有所帮助。
问题
Store不是React组件，因此它不能使用useStore钩子。
useStore
此钩子返回对传递的相同Redux存储的引用在CCD_ 4分量中。
换句话说，useStore钩子期望从ReactTree中的更高层向其提供Redux上下文。
解决方案
根据我对代码的了解，您似乎希望Store函数创建并返回一个Redux存储对象，并将其传递给Provider组件。
store.js
import { createStore, combineReducers } from 'redux';
import counter from '../path/to/counter.reducer';
const rootReducer = combineReducers({
counter,
});
const store = createStore(rootReducer);
export default store;
类型
export const handleIncrement = 'handleIncrement' ;
export const handleDecrement = 'handleDecrement';
counter.reducer.js
reducer函数应保持状态不变。在这种情况下，状态是一个具有count属性的对象。
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case handleDecrement:
return {
...state,
count: state.count - 1
};
case handleIncrement:
return {
...state,
count: state.count + 1,
};
default:
return state;
}
};
index.js
...
import store from '../path/to/store';
...
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
计数器
组件应该使用useSelector和useDispatch挂钩来读取和更新存储中的counter状态，而不是使用本地组件状态。
import { useDispatch, useSelector } from 'react-redux';
const Counter = () => {
const dispatch = useDispatch();
const count = useSelector(state => state.counter.count);
const handleIncrement = () => {
dispatch({ type: handleIncrement });
}
const handleDecrement = () => {
dispatch({ type: handleDecrement });
}
return (
<div>
<center>
<h1>Redux</h1>
<h1>{count}</h1>
<button className="btn btn-primary" onClick={handleIncrement}>Increment</button>
<button className="btn btn-warning" onClick={handleDecrement}>decrement</button>
</center>
</div>
);
}
export default Counter;
我遇到了这个问题，答案是我意外地再次安装了锁定的包，删除了它，它运行了
这可能会对某人有所帮助，从而增加答案。我也遇到了同样的问题，这是一个愚蠢的错误造成的。在安装react bootstrap时，我在父文件夹中安装了npm，而不是项目文件夹本身。当我后来在项目文件夹中安装npm时，错误已经消失了。
真的很傻。
尝试卸载节点包。或
如果每次都使用新的终端，请在安装任何软件包之前包含changedirectory命令
，因此它只为整个项目创建一个节点模块，即package-lock.json和package.json
像这样：
npx create-react-app projectname
cd addtocart
npm start
cd projectname
npm install react-bootstrap bootstrap –save
cd projectname
npm install @reduxjs/toolkit
cd projectname
npm install react-redux
它对我有效。
我第一次使用帧器运动库时遇到了同样的问题。
如果安装任何类型的库(如npm install framer-motion(，您应该留在您的项目目录中，然后库应该显示在package.json文件。
这就是你可以摆脱"；can not read properties of null"；。
删除并重新安装npm模块，使用命令=npm-install，可以安装npm模块。
这将解决错误。