英文:
useSelector from 'react-redux' is undefined when running application
问题
以下是翻译好的部分：
"react-redux" 中的 "useSelector" 函数在我的 React 应用中是 "undefined" 的，尽管版本是最新的，而且在 VS Code 中没有错误（我甚至可以使用 ctrl + 单击查看类型，并查看 node_modules 文件夹中的代码）。这以几种方式表现出来：
-
以下错误：
[HMR] bundle has 1 warnings: export 'useSelector' was not found in 'react-redux'。 -
在以下组件中：
import React, { useState } from 'react';import { useSelector } from 'react-redux'; // 导入 useSelector 在 VS Code 中不会出错const TestComponent = () => {const [x, setX] = useState("hello"); // useState 正常工作console.log(useSelector); // 但当应用运行时，useSelector 为 undefinedreturn <p> {x} </p>;}export default TestComponent;
我不确定这个错误是否与热重载、webpack 或其他原因有关。
包版本:
// react"@types/react": "^16.9.9","react": "^16.10.2",// redux"@types/react-redux": "^7.1.5","react-redux": "^7.1.3","redux": "^4.0.5",
我尝试过的方法:
-
更新所有 redux 包到最新版本
-
删除
node_modules并重新安装 -
更新热重载包到最新版本
-
查看
node_modules中的react-redux代码，它确实具有useSelector钩子，但如果我执行以下操作：import * as ReactRedux from 'react-redux';然后console.log(ReactRedux)，我会看到以下内容，表示没有导入任何钩子：
1: https://i.stack.imgur.com/YGWTC.png
英文:
The useSelector function from 'react-redux' is undefined in my react application, even though the versions are up to date, and there are no errors in VS Code (I can even ctrl-click in and see the typings, and the code in the node_modules folder). This manifests in a few ways:
-
The following error
[HMR] bundle has 1 warnings: export 'useSelector' was not found in 'react-redux'. -
In the following component:
import React, { useState } from 'react';
import { useSelector } from 'react-redux'; // importing useSelector does not error in VS Codeconst TestComponent = () => {
const [x, setX] = useState("hello"); // useState works correctly
console.log(useSelector); // but useSelector is undefined when the application runs
return <p> {x} </p>
}export default TestComponent;
I am not sure if this error is to do with hot reloading, webpack, or something else entirely.
Package versions:
// react"@types/react": "^16.9.9","react": "^16.10.2",// redux"@types/react-redux": "^7.1.5""react-redux": "^7.1.3","redux": "^4.0.5",
What I have attempted:
-
Updated all redux packages to latest versions
-
Deleted
node_modulesand reinstalled -
Updated hot reloading packages to latest versions
-
Looking into the code of
react-reduxinnode_modules, it does have theuseSelectorhook, but if I do the following:import * as ReactRedux from 'react-redux';and thenconsole.log(ReactRedux), I see the following, indicating none of the hooks have been imported:
答案1
得分: 2
在你的代码片段中，没有找到任何使用的存储库。
我已经添加了一个示例工作应用程序，该应用程序增加和减少值，以及登录和登出。
请查看下面的代码片段：
import React, { useEffect } from "react";import ReactDOM from "react-dom";import { useSelector, useDispatch, Provider } from "react-redux";import allActions from "./actions";import { createStore } from "redux";import rootReducer from "./reducers";const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());const App = () => {const counter = useSelector(state => state.counter);const currentUser = useSelector(state => state.currentUser);const dispatch = useDispatch();const user = { name: "Rei" };useEffect(() => {dispatch(allActions.userActions.setUser(user));}, []);return (<div className="App">{currentUser.loggedIn ? (<><h1>Hello, {currentUser.user.name}</h1><button onClick={() => dispatch(allActions.userActions.logOut())}>Logout</button></>) : (<><h1>Login</h1><buttononClick={() => dispatch(allActions.userActions.setUser(user))}>Login as Rei</button></>)}<h1>Counter: {counter}</h1><button onClick={() => dispatch(allActions.counterActions.increment())}>Increase Counter</button><button onClick={() => dispatch(allActions.counterActions.decrement())}>Decrease Counter</button></div>);};const rootElement = document.getElementById("root");ReactDOM.render(<Provider store={store}><App /></Provider>,rootElement);
工作示例：codesandbox链接
英文:
So in your codesnippet, didnt find any store which is used.
I have added a sample working application which increments and decrements the value and sign in and signout
See the below snippet and check
App.js
import React, { useEffect } from "react";import ReactDOM from "react-dom";import { useSelector, useDispatch, Provider } from "react-redux";import allActions from "./actions";import { createStore } from "redux";import rootReducer from "./reducers";const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());const App = () => {const counter = useSelector(state => state.counter);const currentUser = useSelector(state => state.currentUser);const dispatch = useDispatch();const user = { name: "Rei" };useEffect(() => {dispatch(allActions.userActions.setUser(user));}, []);return (<div className="App">{currentUser.loggedIn ? (<><h1>Hello, {currentUser.user.name}</h1><button onClick={() => dispatch(allActions.userActions.logOut())}>Logout</button></>) : (<><h1>Login</h1><buttononClick={() => dispatch(allActions.userActions.setUser(user))}>Login as Rei</button></>)}<h1>Counter: {counter}</h1><button onClick={() => dispatch(allActions.counterActions.increment())}>Increase Counter</button><button onClick={() => dispatch(allActions.counterActions.decrement())}>Decrease Counter</button></div>);};const rootElement = document.getElementById("root");ReactDOM.render(<Provider store={store}><App /></Provider>,rootElement);
Working codesandbox
答案2
得分: -2
The workaround for me was to install metro package version 0.56.0 .
Via npm:
npm install metro@0.56.0
Via yarn
yarn add metro@0.56.0
英文:
The workaround for me was to install metro package version 0.56.0 .
Via npm:
npm install metro@0.56.0
Via yarn
yarn add metro@0.56.0
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论