javascript - “未处理的拒绝（TypeError）：无法读取未定义的属性'dispatch'”react-redux错误

Question

我正在经历一个 react-redux tuturial。我的 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 数组，我认为这意味着我的商店在开始时就存在，但为什么我不能稍后发送它？

标签： javascriptreactjsreduxreact-redux

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);
    });
  }