Reactjs 如何组合贴图和设置状态

我正在创建一本食谱书，并试图获取当前打开的食谱页面

{this.state.recipes.map(res => {
  const recipeId = this.state.recipeId;
  if (res.id == recipeId) {
    this.setState({
      selectedRecipe: res
    });
  }
})}

正如您所看到的，state中有一个recipes字段，它保存所有的配方，它们是从前面的json中获取的。 recipeId是打开的当前页面的id，它也在之前保存，在本例中的值为0。 现在，我要做的是从所有配方中提取id为0的配方，并将其保存在selectedRecipe中，但由于某些原因，我会出现下一个错误：

“超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。”

---

如何修复此问题？

以以下方式重新组织代码：

const recipeId = this.state.recipeId
const recipe = this.state.recipes.map(res => res.id === recipeId)             

this.setState({ selectedRecipe: recipe })

---

map

不是这里要用的东西

const selectedRecipe = this.state.recipes.find(recipe => recipe.id === this.state.recipeId);
this.setState({ selectedRecipe });

如果在render中调用此函数（而不是

onClick

或类似的函数），则将进入一个循环，其中强制执行设置状态的重新渲染，导致设置状态的重新渲染，导致重新渲染

---

在这种情况下，最好查看

componentdiddupdate

。如果在

onClick

中调用此函数，则应该可以。

在获取配方后，可以借助数组方法直接设置

selectedRecipe

，而不是尝试在渲染方法中使用

setState

示例

componentDidMount() {
  getRecipes().then(recipes => {
    setState(prevState => {
      const { recipeId } = prevState;
      const selectedRecipe = recipes.find(res => res.id === recipeId);

      return { recipes, selectedRecipe };
    });
  });
}

---

假设recipes是在状态中声明的数组，则可以使用filter方法

例如：

const selectedRecipe = this.state.recipes.filter(recipe => recipe.id === this.state.recipeId);
this.setState({ selectedRecipe });

---

您在何处执行上述表达式这是在render方法中。您不应该在render中调用setState，但问题是信息保存在上面的componentWillMount中，但在我在其他地方调用时状态尚未设置如果信息是在componentWillMount中接收的，您应该在componentWillMount本身中调用上述代码。P.S.componentWillMount在最新版本中也被弃用，因此最好将componentWillMount中的所有代码都放在ComponentDidMount中。我在api设置状态之后尝试了这个方法，但它返回了一个未定义的状态，因为该状态未设置为yetSet在构造函数中设置初始状态

constructor（）{this.state={recipes:[]，selectedRecipe:null}；

使用了此选项，但返回的是空数组。recipeId是整数还是字符串？它是整数