Javascript TypeError:无法读取属性'；GetComponents'；未定义的

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

我尝试的内容：在它不起作用之前，我修复了一个绑定问题（使用箭头函数）。这允许页面动态创建元素。现在我遇到的问题是：单击按钮会抛出一个错误

建造师

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

获取GetComponents函数

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

let predictionDOM=this.state.domElementsObj.map（函数（obj，i）{
返回(

this.getComponents（obj[0]）}>
{obj[0]+“----”}
----准确率百分比：{obj[1]}--
保存到收藏夹

);
});
返回(
测试api
输入您的食物：

预测
{predictionDOM}
);
}
}```

“您需要使用箭头函数来保留此上下文。因此，请将其更改为让predictionDOM=this.state.domElementsObj.map（（obj，i）=>{…”

---

感谢@Jayce444的帮助

您需要使用箭头函数来保存

此

的上下文。因此将其更改为

let predictionDOM=this.state.domElementsObj.map（（obj，i）=>{..

…还可以使用

setState

将获取的数据保存到state@xadm嘿，谢谢你的建议，不过我有点困惑。你会建议我在哪里设置状态？@Jayce444这解决了问题。谢谢。GetComponents…然后（回复=>{setState（resp…）。。。。