Как я могу заставить это действие реагировать? - PullRequest
Новая
       6

Как я могу заставить это действие реагировать?

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

Когда я заменяю «this.props.fetchInfo (recipe.id)» на console.log (recipe.id), «recipe.id» регистрируется при нажатии на div. Однако действие никогда не запускается. У меня есть другой файл console.log в моем действительном создателе действий, который регистрирует идентификатор, если он действительно передается, но я просто получаю сообщение об ошибке (что, как я ожидаю, но я полагаю, что, по крайней мере, зарегистрирует идентификатор перед ошибками в моем приставка). Я не уверен, правильно ли настроена структура для компонента «Рецепт», хотя выглядит так, как есть. Кроме того, я не уверен, есть ли более правильный способ сделать то, что я пытаюсь сделать, а именно взять часть (recipe.id) состояния из моего последнего запроса AJAX и использовать его для создания второй AJAX-запрос на возврат нужной мне информации. Ниже приведен компонент Рецепт: 

import React, { Component } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-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) {
          console.log(recipe.id);
          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 голосов
/ 01 ноября 2018

Ну, я закодировал что-то, что, как мне кажется, вы пытаетесь сделать. 

class Recipe extends React.Component {

  renderFood(foods) {
    
    return (
      <div>
        {foods.map(recipe => (
            <div
              key={recipe.id}
              onClick={() => this.props.fetchInfo(recipe.id)}
            >
              <div id="recipe-title">{recipe.title}</div>
            </div>
          )
        )}
      </div>
    );
  }

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

const foodsList = [
 { title: "beans", id: 1 },
 { title: "rice", id: 2 },
];

class Main extends React.Component {
  state = { received: false, info: null };
  
  fetchInfo(id) {
    this.setState({
      received: true,
      info: id,
    });
  }
  
  render() {
    const { received, info } = this.state;
    
    return (
      <div>
       {received && (<div>{info}</div>)}
        <Recipe
          foods={foodsList}
          fetchInfo={(id) => this.fetchInfo(id)}
        />
      </div>
    );
 };
}


ReactDOM.render(<Main />, document.querySelector("#app"));
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Вы связываете неправильно.

Заменить

{food.map(function(recipe) {

с

{food.map(recipe => {

...