как использовать для действия в функции, запускаемой компонентом? - PullRequest
Новая
       37

как использовать для действия в функции, запускаемой компонентом?

0 голосов
/ 04 ноября 2018

Я получаю сообщение об ошибке «Не удается прочитать свойство« props »с неопределенным значением» из-за действия, инициированного в моем событии onClick. Я хочу, чтобы действие вызвало кусок состояния из магазина, чтобы сделать запрос AJAX с ним. 

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { fetchInfo } from "../actions";

// Here we take in the passed in props from the FoodList component and render
// the dishes for the inputted ingredients

class Recipe extends Component {

  renderFood(food) {
    return (
      <div className="food-container">
        {food.map(function(recipe) {
          return (
            <div
              className="indiv-recipe"
              style={{
                backgroundImage: "url(" + recipe.image + ")"
              }}
              onClick={() => this.props.fetchInfo(recipe.id)}
            >
              <div id="recipe-title"> {recipe.title}</div>
            </div>
          );
        })}
      </div>
    );
  }

  render() {
    return (
      <div>
        <h1>{this.props.foods.map(this.renderFood)}</h1>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchInfo }, dispatch);
}

export default connect(
  null,
  mapDispatchToProps
)(Recipe);

1 Ответ

0 голосов
/ 04 ноября 2018

Вам просто не хватает этого в обеих картах, либо измените обе функции на стрелки или передайте их в качестве второго параметра при вызове карты.

...