"Unhandled Rejection (TypeError): Cannot read property 'dispatch' of undefined"反应冗余错误

Question

我正在经历一个反应还原教程。我在我的App.js.上收到了这个错误

"未处理的拒绝(TypeError(：无法读取未定义"的属性"dispatch"；

19 | class App extends React.Component {
20 |   componentDidMount() {
21 |     axios.get('http://localhost:3000/db.json').then(({ data }) => {
> 22 |       window.store.dispatch(setPizzas(data.pizzas));
23 |     });
24 |   }
25 | 

这是我的App.js:

import React from 'react';
import { Route } from 'react-router-dom';
import axios from 'axios';
import { setPizzas } from './redux/actions/pizzas';
import { connect } from 'react-redux';
import { Header } from './components';
import { Home, Cart } from './pages';
class App extends React.Component {
componentDidMount() {
axios.get('http://localhost:3000/db.json').then(({ data }) => {
window.store.dispatch(setPizzas(data.pizzas));
});
}
render() {
console.log(this.props.items);
return (
<div className='wrapper'>
<Header />
<div className='content'>
<Route
exact
path='/'
render={() => <Home items={this.props.items} />}
/>
<Route exact path='/cart' component={Cart} />
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
items: state.pizzas.items,
};
};
export default connect(mapStateToProps)(App);

我的index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import './scss/app.scss';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>,
document.getElementById('root')
);

我尝试了console.log(this.props.items)，得到了emty数组，我想这意味着我的商店一开始就存在，但为什么我不能稍后调度它呢？

Answer 1

const mapDispatchToProps = dispatch => {
return {
onSetPizzas: (pizzas) => setPizzas(pizzas)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

并将其称为

componentDidMount() {
axios.get('http://localhost:3000/db.json').then(({ data }) => {
props.onSetPizzas(data.pizzas);
});
}