我怎样才能使这个动作在反应中起作用？

Question

当我将 "this.props.fetchInfo(recipe.id)" 替换为 console.log(recipe.id) 时，单击 div 时会记录 "recipe.id"。但是，永远不会触发该操作。我的实际操作创建者中有另一个 console.log，如果它实际传入，它会记录 id，但我只是收到一个错误（这是我期望的，但我认为我至少会在错误之前记录 id在我的控制台中）。我不确定是否为 "Recipe" 组件正确设置了结构，尽管它看起来是这样。另外，我不确定是否有更正确的方法来做我想做的事情，即从我上次 AJAX 请求中获取状态的一部分 (recipe.id)并使用它向 return 我需要的信息发出第二个 AJAX 请求。以下是Recipe组件：

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

Answer 1

好吧，我编写了一些我相信你正在尝试做的事情。

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 => {

我怎样才能使这个动作在反应中起作用？

How can I make this action in react work?

javascript

action

reactjs

redux