存储来自api调用React native的结果

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}
      />
    })
  }

....