Question

我正在创建一个本机应用程序，当我对另一个组件执行操作时，我需要一个组件来使用axios get请求。但是问题是我需要从axios获取请求的组件没有传递任何道具，并且当前状态和新状态是20个对象的数组，每个对象至少有10个键值对。因此，我需要一个组件进行良好的if语句更新，以免进入无限循环。我无法使用prevState进行if语句来与当前状态进行比较，因为状态仅发生了很小的变化。因此，我需要知道如何阻止组件Did 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来避免此类问题。假设您没有使用flux体系结构，则可以将this.getFavouriteData（）作为道具传递给其他组件，例如：

<YourComponent triggerFavouriteData = {this.getFavouriteData}/>

当使用componentDidUpdate（）时，如何避免死循环是一个对象数组？

2 个答案: