使用 componentDidUpdate() 时，当你的状态是一个对象数组时，如何避免无限循环？

Question

我正在创建一个反应原生应用程序，当我对另一个组件执行操作时，我需要我的一个组件来使用 axios get 请求。但问题是我需要 axios get 请求的组件没有传递任何 props，当前状态和新状态是一个由 20+ 个对象组成的数组，每个对象至少有 10 个键值对。所以我需要一个组件确实用一个好的 if 语句更新，以免进入无限循环。我无法使用 prevState 执行 if 语句以与当前状态进行比较，因为状态中只发生了微小的变化。所以我需要知道如何阻止组件 Do Update 有一个无限循环。

state = {
favouriteData: []
}
componentDidMount () {
this.getFavouriteData()
}
componentDidUpdate (prevProps, prevState) {
if (this.state.favouriteData !== prevState.favouriteData){
this.getFavouriteData()
}
}
getFavouriteData = () => {
axios.get('http://5f46425d.ngrok.io')`enter code here`
.then(response => {
const data = response.data.filter(item => item.favourite === true)
this.setState({
favouriteData: data
})
})
}

Answer 1

问题是您正在尝试通过执行以下操作来比较 2 个对象引用。它将始终返回，因为引用总是不同的。

if (this.state.favouriteData !== prevState.favouriteData) {...}

为了使生活更轻松，我们可以使用 Lodash(_.isEqual( 来处理对象的深度比较。

state = {
favouriteData: []
}
componentDidMount () {
this.getFavouriteData()
}
componentDidUpdate (prevProps, prevState) {
this.getFavouriteData(prevState.favouriteData)
}
getFavouriteData = (prevData) => {
axios.get('http://5f46425d.ngrok.io')
.then(response => {
const data = response.data.filter(item => item.favourite === true);
// compare favouriteData and make setState conditional
if (!prevState || !_.isEqual(prevData, data)) {
this.setState({
favouriteData: data
})
}
})
}

Answer 2

你应该使用 react-redux 来避免这类问题。假设你没有使用通量架构，你可以将this.getFavoriteData((作为props传递给其他组件，如下所示：

<YourComponent triggerFavouriteData = {this.getFavouriteData}/>