Question

我遇到的问题是无限循环。

我有这个状态：

this.state = {
  apiData: [],
  pageNum: 1,
  isLoadingList: 0,
  search: "",
  layout: "list"
}

我有一个从API获取数据的函数：

fetchApi(){
  fetch("www.api.com", ...)
}

获取数据后，它会将所有内容保存在apiData中（this.state.apiData）

我试图做的就是调用该函数，＆＃34; fetchApi（）＆＃34;，当＆＃34; this.state.search＆＃34;变化。如果我使用Lifecycle的组件（如componentDidUpdate（），...），它将创建一个无限循环，因为apiData也是一个状态（对this.state.apiData所做的更改将触发Lifecycle＆amp;组件相关的组件再次，再次，以及......）。

所以我想跟踪仅 this.state.search，当它发生变化时，它会调用函数＆＃34; fetchApi（）＆＃34;这改变了this.state.apiData值。

我可能会尝试做一些错误的事情，并且不应该这样做，所以任何以不同方式做同样事情的想法都是受欢迎的。

谢谢！

Answer 1

使用shouldComponentUpdate

shouldComponentUpdate: function(nextProps, nextState) {
  return this.state.search !== nextState.state.search;
}

Answer 2

shouldComponentUpdate意味着像这样使用：

shouldComponentUpdate(nextProps, nextState) {
  let currentState = this.state
  return currentState.search.id !== nextState.search.id
}

更新组件的状态时，它将按以下顺序触发这些方法：

shouldComponentUpdate
componentWillUpdate
呈现
componentDidUpdate

shouldComponentUpdate在状态更改之后被称为（使用setState），并且应该返回布尔值，如果false，则React不会调用下一个方法归还。

您应该从不从setState方法调用shouldComponentUpdate。这是为了防止不必要的视图计算。

如果正确定义shouldComponentUpdate，则无限循环不会来自StateChange挂钩链。

仅跟踪一个状态React

2 个答案: