React-Redux 6 错误：在 props 中传递 redux 存储已被删除并且不执行任何操作

Question

我的反应应用程序抛出以下错误，因为我只有几周的反应时间，而在 redux 中甚至更少，我不知道如何超越它。我尝试了来自网络的不同答案，但未能成功。也许你们中的一些人可以提供帮助。

错误：

在 props 中传递 redux 存储已被删除，并且不执行任何操作。要为特定组件使用自定义 Redux 存储，请使用 React.createContext() 创建自定义 React 上下文，并将上下文对象传递给 React-Redux 的 Provider 和特定组件，例如：。你也可以传递一个 {context : MyContext} 选项来连接

代码如下所示

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.css'
import 'bootstrap-social/bootstrap-social.css'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConfigureStore } from './redux/configureStore';
const store = ConfigureStore();

class App extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<div>
<Main />
</div>
</BrowserRouter>
</Provider>
);
}
}
export default App;

Reducer.js：

import { DISHES } from '../shared/dishes';
import { COMMENTS } from '../shared/comments';
import { PROMOTIONS } from '../shared/promotions';
import { LEADERS } from '../shared/leaders';
export const initialState = {
dishes: DISHES,
comments: COMMENTS,
promotions: PROMOTIONS,
leaders: LEADERS
};
export const Reducer = (state = initialState, action) => {
return state;
};

configureStore.js

import { createStore } from 'redux';
import { Reducer, initialState } from './reducer';
export const ConfigureStore = () => {
const store = createStore(
Reducer, // reducer
initialState, // our initialState
);
return store;
}

MainComponent.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Header from './HeaderComponent'
import Footer from './FooterComponent'
import DishDetail from './DishdetailComponent'
import About from './AboutComponent';
import Home from './HomeComponent';
import Contact from './ContactComponent';
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'
import { connect } from 'react-redux';

const mapStateToProps = state => {
return {
dishes: state.dishes,
comments: state.comments,
promotions: state.promotions,
leaders: state.leaders
}
}
class Main extends Component {
render() {
const HomePage = () => {
return (
<Home
dish={this.props.dishes.filter((dish) => dish.featured)[0]}
promotion={this.props.promotions.filter((promo) => promo.featured)[0]}
leader={this.props.leaders.filter((leader) => leader.featured)[0]}
/>
);
}
const DishWithId = ({ match }) => {
return (
<DishDetail dish={this.props.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}
comments={this.props.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))} />
);
};
return (
<div>
<Header />
<div>
<Switch>
<Route path='/home' component={HomePage} />
<Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
<Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
<Route path='/menu/:dishId' component={DishWithId} />
<Route exact path='/contactus' component={Contact} />} />
<Redirect to="/home" />
</Switch>
</div>
<Footer />
</div>
);
}
}
export default withRouter(connect(mapStateToProps)(Main));

Answer 1

您用于处理表单的包-“react-redux-form”目前正面临 React 6 的问题。它目前处于维护模式。

您可以使用 Formik 之类的替代方案，也可以降级到“React”和“react-native-form”的稳定版本。

希望这会有所帮助:)