卧疾丰暇豫,翰墨时间作。这篇文章主要讲述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调用保留在构造函数之外,即使在异步时也是如此。
推荐阅读
- 当app在前台时发送推送通知
- Android XML解析与泰米尔新闻API
- Android Studio(加载时MapView应用崩溃)
- 为什么PKWARE网站上的ZIP APPNOTE没有在其规范中提到正确的密码检查机制()
- 在React-Native Expo的App购买中()
- 从服务器[DF-AA-20]检索信息时的应用程序内购买错误 - android
- 在收到用于自动续订订阅的Apple statusUpdateNotification时,如何确定客户/用户()
- IAP - 无法连接到iTunes Store - 仅在Apple审核期间
- Adobe AIR后退按钮事件不适用于Android API 28 +