Блог

Я проходил обучение react-redux. Я получаю эту ошибку на своем App.js .

«Необработанное отклонение (ошибка типа): не удается прочитать свойство ‘отправка’ неопределенного»

   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, я думаю, это означает, что мой магазин существует при запуске, но почему я не могу отправить его позже?

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