来自API调用React本地的存储结果

Question

我如何将此API调用中的配方名称存储到状态变量或某些其他变量中，以在渲染中进一步使用

{
        this.props.recipeList.recipeList.filter((recipe) => recipe.recipeName === search).map(recipe => {
          return <Recipe
            name={recipe.recipeName}
            numberOfServings={recipe.numberOfServings}
            key={'recipe-' + recipe.recipeId}
          />
        })
      }

Answer 1

，因为这是在render中执行的，请避免修改组件状态。

我建议在render方法的顶部声明一个变量，然后在map调用中分配。当然，这假定filter只会返回单个结果。

类似：

render() {
  let name;
  ....
  {
    this.props.recipeList.recipeList.filter((recipe) => recipe.recipeName === search).map(recipe => {
      name = recipe.recipeName; // this bit
      return <Recipe
        name={recipe.recipeName}
        numberOfServings={recipe.numberOfServings}
        key={'recipe-' + recipe.recipeId}
      />
    })
  }
....