Question

我正在尝试根据API请求动态创建按钮。我已经将食物添加到对象中，现在我正在使用map函数动态创建DOM元素。我遇到了尝试创建按钮而onClick导致问题的问题。我收到“ TypeError：无法读取未定义的属性'getIngredients'”，其中getIngredients是我尝试调用的函数...

我尝试过的事情：在它无法正常工作之前，我修复了一个绑定问题（带有箭头功能）。允许页面动态创建元素。现在我要解决的问题是：单击按钮会引发错误。

构造函数

class Prediction extends React.Component {
  constructor(props) {
    super(props);
    this.state = { usersFood: "", domElementsObj: [], foodTemp: [] };
  }

获取getingredients功能

  getIngredients = params => {

    params.map(function(x, i) {
      console.log(i);
      fetch(
        `${base}?q=${params[0]}&app_id=${YOUR_APP_ID}&app_key=${YOUR_APP_KEY}`
      )
        .then(response => {
          console.log(response.json());
        })
        .catch(function(error) {
          console.log(error);
        });
    });
  };

动态创建dom：

    let predictionDOM = this.state.domElementsObj.map(function(obj, i) {
      return (
        <div>
          <li key={obj[0]}>
            <button onClick={() => this.getIngredients(obj[0])}>
              {obj[0] + " -----"}
            </button>
            <span> ---- % of accuracy : {obj[1]} --</span>
            <button> Save to favorites</button>
          </li>
        </div>
      );
    });
    return (
      <div>
        <h1>testing api</h1>
        <p>Enter in your food :</p>
        <input
          type="text"
          value={this.state.usersFood}
          onChange={this.handleChange}
          placeholder="Enter your food"
        />
        <button onClick={this.getPredictions}>Make Predictions</button>
        {predictionDOM}
      </div>
    );
  }
}```

Answer 1

“您需要使用箭头函数来保留其上下文。因此，请对其进行更改以使预测DOM = this.state.domElementsObj.map（（obj，i）=> {...”

感谢Jayce444的帮助

TypeError：无法读取未定义的属性“ getIngredients”

1 个答案: