Reactjs 使用componentDidUpdate（）时，如何避免在'；re state是一个对象数组吗？

我正在创建一个react本机应用程序，当我对另一个组件执行操作时，我需要我的一个组件使用axios get请求。但问题是，我需要axios get请求的组件没有通过任何道具，当前状态和新状态是一个20多个对象的数组，每个对象至少有10个键值对。因此，我需要一个使用良好的if语句进行更新的组件，以避免进入无限循环。我无法使用prevState执行if语句来与当前状态进行比较，因为状态中只发生了微小的更改。所以我需要知道如何阻止组件的无限循环

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
        })
    })
}

---

问题是您正试图通过执行以下操作来比较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
            })
        }
    })
}

---

您应该使用react-redux来避免此类问题。假设您没有使用flux体系结构，您可以将此.getFavoriteData（）作为道具传递给其他组件，如：

<YourComponent triggerFavouriteData = {this.getFavouriteData}/>

是

GetFavoriteData（）

始终自动触发还是可以通过单击按钮触发？