在 react 中使用 redux 时，当我在代码中使用<Provider></Provider>时，它会抛出奇怪的错误。这是怎麽？

Question

我正在使用react js创建一个应用程序，使用react redux作为状态管理器。我创建了一个文件，将我的所有状态存储在一个地方，在我的app.js中使用Provider时，我遇到了这个奇怪的巨大错误。我是一个初学者，正在学习redux，一开始我无法理解这一点。请尽快帮助别人。

我的app.js看起来是这样的：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Contacts from './components/contacts/Contacts';
import AddContact from './components/contacts/AddContact';
import EditContact from './components/contacts/EditContact';
import Header from './components/layout/Header';
import About from './components/pages/About';
import NotFound from './components/pages/NotFound';
import {Provider} from 'react-redux';
import store from './store';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Header branding="Contact Manager" />
<div className="container">
<Switch>
<Route exact path="/" component={Contacts} />
<Route exact path="/contact/add" component={AddContact} />
<Route exact path="/contact/edit/:id" component={EditContact} />
<Route exact path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</div>
</div>
</Router>
</Provider>     
);
}
}
export default App;

如果我不在这里使用Provider，应用程序就会运行。附有错误的屏幕截图。

我得到的错误：

Provider
C:/Users/lenovo/Desktop/contactmanager_redux/node_modules/react-redux/es/components/Provider.js:11
8 | var store = _ref.store,
9 |     context = _ref.context,
10 |     children = _ref.children;
> 11 | var contextValue = useMemo(function () {
12 |   var subscription = createSubscription(store);
13 |   subscription.onStateChange = subscription.notifyNestedSubs;
14 |   return {
View compiled
mountIndeterminateComponent
C:/Users/lenovo/Desktop/contactmanager_redux/node_modules/react-dom/cjs/react-dom.development.js:13380
13377 |   }
13378 | 
13379 |   ReactCurrentOwner.current = workInProgress;
> 13380 |   value = fn(props, context);
13381 | }
13382 | // React DevTools reads this flag.
13383 | workInProgress.effectTag |= PerformedWork;
View compiled
beginWork
C:/Users/lenovo/Desktop/contactmanager_redux/node_modules/react-dom/cjs/react-dom.development.js:13820
13817 | 
13818 | switch (workInProgress.tag) {
13819 |   case IndeterminateComponent:
> 13820 |     return mountIndeterminateComponent(current, workInProgress, renderExpirationTime);
13821 |   case FunctionalComponent:
13822 |     return updateFunctionalComponent(current, workInProgress);
13823 |   case ClassComponent:

以下是错误的屏幕截图：

这是我的商店.js:中的代码

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const initialState = {};
const middleware = [thunk];
const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
export default store;

以下是来自"的rootReducer中的代码/减速器/索引：

import {combineReducers} from 'redux';
import contactReducer from './contactReducer';
const rootReducer = combineReducers({
contact: contactReducer
});
export default rootReducer;

和来自'的contactReducer/contactReducer’：

const initialState = {};
export default function(state = initialState, action){
switch(action.type){
default:
return state;
}
}

Answer 1

问题的发生是因为您的版本。并不是所有的版本都能与其他版本兼容，而且你的react和react dom似乎与react redux不兼容。你需要更新它。在你的项目根中将它键入你的终端

npm upgrade react react-dom

这应该会更新您的程序包，并在重新启动后正常工作。

此外，我看了你的项目，这里有几个快速提示：

第一.js用于javascript。如果您正在返回html(例如您的APP.js文件(，它应该以.jsx结尾。jsx的意思是javascript xml。当它工作时。。。事实并非如此。对于typescript，任何返回HTML的文件都应该是.jsx或.tsx。

第二。不要将node_modules文件夹放在存储库中。它是存放包裹的文件夹。你不需要它。package.json会跟踪你需要什么包，什么版本。每当你刚完成一个项目时，只需执行npm i(npm install的缩写(，所有的包都会为你下载。

3nd。不要放package-lock.json。它不是种子。每当你在npm i上安装任何软件包时都会生成它。

第四。现在的标准是ES6。这意味着你拥有的所有类-建议切换到箭头函数。代替

class App extends Component {
render() {
..code..
}
}

它将是

const App = () => {
return {
..code..
}
}

当使用状态和大量逻辑时，箭头功能更干净。

第五。干净的代码！这方面有基本的指南。一行中应该有多少个字符是有严格限制的——分解代码。您应该在什么时候破坏代码以及在什么部分破坏代码，这是有规则的。这一切都很重要。虽然代码有效，但格式不正确的代码可能很难阅读和调试。如果您使用visual studio代码(VSC(，我建议您使用扩展Prettier - code formatter。它是生命的救世主！

此外，不要做

if (name === "") {
this.setState({ errors: { name: "Name is required" } });
return;
}
if (email === "") {
this.setState({ errors: { email: "Email is required" } });
return;
}
if (phone === "") {
this.setState({ errors: { phone: "Phone is required" } });
return;
}

如果你需要这么多国际单项体育联合会，那么就使用switch。但在您的情况下，您可以简单地执行一个函数来检查它是否为空，并执行一个循环来检查所需的每个字段。或者更好的方法是在表单元素上使用内置required标记。您可以将required参数赋予<input />，使其在表单提交时成为必需参数。并为它制作一个自定义错误消息。有很多方法可以处理它，但你的方法不是。建议进一步研究：(

希望这些简短的提示能帮助你，更新能帮助你的问题：(