Redux 및 React. Uncaught TypeError : 정의되지 않은 'dispatch'속성을 읽을 수 없습니다.

Question

중첩 된 구성 요소에서 디스패치를 ​​호출하려고합니다. Redux와 React를 사용하고 있습니다.

내 앱 구조이다

[응용]

---- [주]

-------- [ShopCoffee]

---- ---- [기타 구성 요소]

app.jsx에서 '디스패치'를 호출하면 작동합니다.

주 구성 요소에서 '디스패치'를 호출하면 render() 메서드 (경고가 있지만 여전히 작동 함)에서 디스패치를 ​​호출 할 때 작동하지만 다른 곳에서 '디스패치'를 호출하면 작동하지 않습니다.

나는 소품으로 공급자 및 addNewItemToCart()를 사용하여 저장소를 통과,하지만 난 ShopCoffee 구성 요소에서 addNewItemToCart를 호출 할 때 오류가 : "catch되지 않은 형식 오류 : 정의되지 않은의 특성을 읽을 수 없습니다 '파견'"여기

App.jsx

import React from "react"; 
 
import ReactDOM from "react-dom"; 
 

 
import Main from "./components/main.component.jsx"; 
 
import { createStore } from "redux"; 
 
import { Provider } from "react-redux"; 
 

 
var app = document.getElementById("app"); 
 

 
function mainAppReducer(state, action) { 
 
\t if (!state) return { 
 
\t \t text: 'test text 1231' 
 
\t } 
 
\t switch (action.type) { 
 
\t \t case 'ADD_TO_CART' : console.log('ADD_TO_CART'); 
 
\t \t return Object.assign({}, state, { text : action.text }); 
 
\t } 
 
} 
 
const store = createStore(mainAppReducer); 
 

 
store.dispatch ({ 
 
\t type : 'ADD_TO_CART', 
 
\t text : 'One more message! ;)' 
 
}); 
 

 
store.dispatch ({ 
 
\t type : 'ADD_TO_CART', 
 
\t text : 'Text text message from redux! ;)' 
 
}); 
 

 
console.log("store.getState() == ", store.getState()); 
 

 
var render =() => ReactDOM.render(<Provider store={store}><Main /></Provider>, app); 
 
store.subscribe(render); 
 
render(); 
 

 
console.log("store.getState() == ", store.getState());

: 내 프로그램입니다

는

을 main.component.jsx

import React from "react"; 
 
import Header from "./header.component.jsx"; 
 
import Footer from "./footer.component.jsx"; 
 
import Cart from "./cart.component.jsx"; 
 
import Checkout from "./checkout.component.jsx"; 
 
import ShopCoffee from "./shop-coffee.component.jsx"; 
 
import Rent from "./rent.component.jsx"; 
 
import Repair from "./repair.component.jsx"; 
 
import Contacts from "./contacts.component.jsx"; 
 
import { connect } from "react-redux"; 
 

 
export class Main extends React.Component { 
 
\t constructor(props) { 
 
\t \t super(props); 
 
\t } 
 
\t addNewItemToCart(itemsInCart) { 
 
\t \t console.log("works"); 
 
\t \t console.log("addNewItemToCart() :: itemData == ", itemsInCart); \t \t 
 
\t \t console.log("from Main: this.props", this.props); 
 
\t \t this.props.dispatch({type : 'ADD_TO_CART'}); 
 
\t 
 
\t } 
 

 
\t getItemsInCart(itemsInCart) { 
 
\t \t console.log("getItemsInCart() :: itemData == ", itemsInCart); 
 
\t \t return itemsInCart; 
 
\t } 
 

 
\t render() { 
 
\t \t console.log('(from render) this.props == ', this.props); 
 
\t \t console.log('dispatch==', this.props.dispatch); 
 
\t \t 
 
\t \t return (
 
\t \t \t <main> 
 
\t \t \t \t <Header /> 
 
\t \t \t \t <Cart getItemsInCart = {this.getItemsInCart} /> 
 
\t \t \t \t <Checkout /> 
 
\t \t \t \t <ShopCoffee addNewItemToCart = {this.addNewItemToCart}/> 
 
\t \t \t \t <Rent /> 
 
\t \t \t \t <Repair /> 
 
\t \t \t \t <Contacts /> \t \t \t \t 
 
\t \t \t \t <Footer /> 
 
\t \t \t </main> 
 
\t \t); 
 
\t } 
 
} 
 

 
export default connect((store) => store)(Main);

가게-coffee.component.jsx

import React from "react"; 
 

 
export default class ShopCoffee extends React.Component { 
 
\t constructor(props) { 
 
\t \t super(props); 
 
\t \t console.log("ShopCoffee /constructor()"); 
 
\t \t console.log("ShopCoffee/this.props", this.props); 
 
\t \t this.state = {shopItems : [], itemsInCart : []}; 
 
\t } 
 

 
// =============== Добавляет выбранный товар в корзину =============== 
 
\t addItemToCart(i) { 
 
\t \t console.log("addItemToCart() i == ",i); 
 
\t \t console.log("addItemToCart() :: this.props", this.props); 
 
\t \t let newSelectedItem = this.state.shopItems[i]; 
 
\t \t this.state.itemsInCart.push(newSelectedItem); 
 
\t \t this.props.addNewItemToCart(this.state.itemsInCart); 
 

 

 
\t } 
 

 
\t getData() { 
 
\t \t const url="/data/coffee.json"; 
 
\t \t fetch(url) 
 
\t \t \t .then((resp) => resp.json()) 
 
\t \t \t .then((data) => { 
 
\t \t \t \t this.state.shopItems = data; 
 
\t \t \t }) 
 
\t \t .catch((error) => console.error("Ошибка загрузки данных из файла", url)); 
 
\t \t 
 
\t } 
 

 

 
\t componentWillMount() { 
 
\t \t this.getData(); 
 
\t } 
 
\t componentDidMount() { 
 
     setInterval(() => this.setState(this.state), 1000); 
 
    } 
 

 
\t render() { 
 
\t \t var itemsArr = []; 
 
\t \t var itemsRow = []; 
 

 
\t \t //console.log("this.state.shopItems ===", this.state.shopItems); 
 
\t \t for (let i=0; i < this.state.shopItems.length; i++) { 
 

 
\t \t \t let item = this.state.shopItems[i]; 
 

 
\t \t \t 
 
\t \t \t itemsArr.push(
 
\t \t \t \t \t \t \t <div className="shop-coffee__item" key={"item"+i}> 
 
\t \t \t \t \t \t \t \t <div className="shop-coffee__item__inner"> 
 
\t \t \t \t \t \t \t \t \t <div className="row"> 
 
\t \t \t \t \t \t \t \t \t \t <div className="shop-coffee__item__kg"> 
 
\t \t \t \t \t \t \t \t \t \t \t <p className="shop-coffee__item__kg__text">{item.weight}</p> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t <div className="shop-coffee__item__space"> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t <div className="shop-coffee__item__price"> 
 
\t \t \t \t \t \t \t \t \t \t \t <p className="shop-coffee__item__price__text">{item.price}</p> 
 
\t \t \t \t \t \t \t \t \t \t </div> \t 
 
\t \t \t \t \t \t \t \t \t </div> \t 
 
\t \t \t \t \t \t \t \t \t <div className="row"> \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t <div className="shop-coffee__item__image"> 
 
\t \t \t \t \t \t \t \t \t \t \t <img className="shop-coffee__item__image__img" src="img/template-img__coffee-shop.jpg" /> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div className="row"> 
 
\t \t \t \t \t \t \t \t \t \t <div className="shop-coffee__item__description"> 
 
\t \t \t \t \t \t \t \t \t \t \t <p className="shop-coffee__item__description__text"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t {item.title} 
 
\t \t \t \t \t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t \t \t \t \t \t <p className="shop-coffee__item__description__text"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t {item.description} 
 
\t \t \t \t \t \t \t \t \t \t \t </p> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div className="row"> 
 
\t \t \t \t \t \t \t \t \t \t <div className="shop-coffee__item__button-container"> 
 
\t \t \t \t \t \t \t \t \t \t \t <button className="shop-coffee__item__button-container__button" onClick={this.addItemToCart.bind(this, i)}> 
 
\t \t \t \t \t \t \t \t \t \t \t \t Заказать 
 
\t \t \t \t \t \t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t); 
 
\t \t \t 
 
\t \t \t if (((i>0) && (i%3 == 0)) || (i == this.state.shopItems.length-1)) { 
 
\t \t \t \t itemsRow.push(
 
\t \t \t \t \t \t \t <div className="row" key={"row"+i}> 
 
\t \t \t \t \t \t \t \t {itemsArr} 
 
\t \t \t \t \t \t \t </div>); 
 
\t \t \t \t itemsArr = []; 
 

 
\t \t \t } 
 

 
\t \t } 
 
\t \t return (
 
\t \t \t \t <section className="shop-coffee"> 
 
\t \t \t \t \t <div className="container"> 
 
\t \t \t \t \t \t <div className="row"> 
 
\t \t \t \t \t \t \t <div className="shop-coffee__title-container"> 
 
\t \t \t \t \t \t \t \t <h2 className="shop-coffee__title-container__title"> 
 
\t \t \t \t \t \t \t \t \t Магазин кофе 
 
\t \t \t \t \t \t \t \t </h2> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t 
 
\t \t \t \t \t \t \t {itemsRow} 
 

 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </section> 
 
\t \t); 
 
\t } 
 
}

Answer 1

난 당신이 바인딩 콜백을 누락 생각 클래스 인스턴스, 컴포넌트의 생성자 li 그래서 애 :

constructor(props) { 
    super(props); 
    ... 
    this.addNewItemToCart = this.addNewItemToCart.bind(this); 
} 

은 기본적으로 : 당신이 ES6 클래스를 사용하는 경우, 당신은 더 많은 정보를 원하시면 문서 반응 참조 콜백 기능을 결합해야합니다

https://facebook.github.io/react/docs/handling-events.html