运行应用程序时，'react-redux'中的useSelector未定义

Question

在我的react应用程序中，useSelector中的'react-redux'函数是undefined，即使版本是最新的，并且VS Code中也没有错误（我什至可以ctrl-单击并查看输入内容，以及node_modules文件夹中的代码）。这通过几种方式体现出来：

1）以下错误[HMR] bundle has 1 warnings: export 'useSelector' was not found in 'react-redux'。

2）在以下组件中：

import React, { useState } from 'react';
import { useSelector } from 'react-redux';  // importing useSelector does not error in VS Code

const 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;

我不确定此错误是否与热重装，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", 

我尝试过的事情：

1）将所有redux软件包更新为最新版本

2）删除node_modules并重新安装

3）将热重装软件包更新为最新版本

4）查看react-redux中node_modules的代码，它确实具有useSelector钩子，但是如果执行以下操作：import * as ReactRedux from 'react-redux';然后是{{1 }}，我看到以下内容，表明没有导入任何钩子：

Answer 1

因此在您的代码段中，没有找到任何使用过的商店。

我添加了一个示例工作应用程序，该应用程序可以增加和减少值以及登录和注销

查看以下代码片段并检查

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>
          <button
            onClick={() => 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

Answer 2

我的解决方法是安装 metro 软件包版本 0.56.0。

通过 npm： npm install metro@0.56.0

通过纱线 yarn add metro@0.56.0