ReactJS：数组从获取​​API调用作为道具传递给子级，返回未定义

Question

我使用的API需要先调用一次才能获得搜索结果列表，然后每个结果再调用一次，以便可以从这些结果中获取详细信息：成分列表。

函数似乎可以完成父组件中应有的功能，因为使用console.log返回我期望的值，但是当子组件接收到这些prop时，它得到的数组是不确定的。

我现在正在测试本地JSON文件，因此我粘贴的代码将反映该情况，而不是实际的API端点。

这是用于返回结果列表的API调用：

  fetchAPIData(input) {
    input = this.props.input;
    fetch('https://localhost:5001/testData.json')
    .then((res) => res.json())
    .then((data) => {
        this.setState( { recipes: data.results, isLoading: false })
    })
  }

这就是我要从结果中获取详细信息的原因：

  getIngredients(recipes) {
    var ingredients = [];
    recipes.map((recipe) => {
      fetch('https://localhost:5001/recipeDetails.json')
      .then(res => res.json())
      .then((data) => {
        ingredients = ingredients.concat(data.extendedIngredients);
      })
    })

因为我想要搜索结果中所有成分的完整列表，所以我制作了一个将结果连接起来的数组。如果在连接后放置console.log(ingredients)，我将得到一个包含所有成分的数组。但是，当它传递给子组件时：

<RecipeFilter onHandleFilter={this.handleFilter} ingredients={this.getIngredients(this.state.recipes)} />

它接收的数组是不确定的。通过阅读，我已经知道使用return ingredients;之类的方法返回数组是行不通的，因为fetch是一个异步函数，因此这些值将在promise解析之前返回，我将结束用一个空数组（无论如何我都尝试过，是的，这就是发生了的事情。）

有什么建议吗？

Answer 1

您可以以某种状态存储配料，名称可以为ingredState，然后像<RecipeFilter onHandleFilter={this.handleFilter} ingredients={this.getIngredients(this.state.recipes)} ingredStateProp = {this.state.ingredState} />一样将其传递给RecipeFilter

在您的getIngredients方法中，您可以像下面这样设置新制作的ingredState的状态：

getIngredients(recipes) {
    var ingredients = [];
    recipes.map((recipe) => {
      fetch('https://localhost:5001/recipeDetails.json')
      .then(res => res.json())
      .then((data) => {
        ingredients = ingredients.concat(data.extendedIngredients);
         this.setState({
           ingredState : ingredients
         })
      })
    }

）