React app，componentDidUpdate - 跳转列表，无限循环

卧疾丰暇豫，翰墨时间作。这篇文章主要讲述React app，componentDidUpdate - 跳转列表，无限循环相关的知识，希望能为你提供帮助。
我有反应。我想在url中切换id。选项卡中的每次单击都应显示不同类型的产品列表。我使用方法componentDidUpdate。问题是，当我单击下一个选项卡时，列表会多次从上一个列表跳到当前列表。我已经读过在方法componentDidUpdate中使用setState可能会出现问题，并且它可能导致无限循环。我尝试了不同的事情，但我不知道，我的代码应该改变什么。你有什么想法，如何解决这个跳跃的事情？

constructor(props) { super(props); this.state = { food: [] }; var ingredient_type = this.props.params.id; fetch('/food/type/'+ingredient_type) .then(res => res.json()) .then(food=> this.setState({food})); }componentDidUpdate(){ var ingredient_type = this.props.params.id; return fetch('/food/type/'+ingredient_type) .then(res => res.json()) .then(food=> this.setState({food})); }render() { let product_list = this.state.food.map((product, id) => < div className="row" key={id}> < pclassName="cal_list col-lg-4 col-md-4 col-sm-4" > {product.name}< /p> < pclassName="cal_list1 col-lg-2 col-md-2 col-sm-2" > {product.calories}< /p> < pclassName="cal_list2 col-lg-2 col-md-2 col-sm-2" > {product.protein}< /p> < pclassName="cal_list3 col-lg-2 col-md-2 col-sm-2" > {product.fat}< /p> < pclassName="cal_list4 col-lg-2 col-md-2 col-sm-2" > {product.carb}< /p> < /div> )

答案这就是我处理你的情况的方法：

constructor(props) { super(props); this.state = { food: [] }; }componentDidMount() { fetchFood(this.props.params.id) }componentDidUpdate(prevProps) { if(this.props.params.id !== prevProps.params.id) { fetchFood(this.props.params.id) } }fetchFood(id) { return fetch('/food/type/'+id) .then(res => res.json()) .then(food=> this.setState({food})); }render() { ... }

【React app，componentDidUpdate - 跳转列表，无限循环】主要区别在于您只需要在获取数据之前检查id是否已更改。我还将初始提取从构造函数移动到componentDidMount。通常希望将副作用和setState调用保留在构造函数之外，即使在异步时也是如此。