Question

所以这是我的组件代码更新了，this.props.getQuestions（）一直在触发。 Questions属性是一组包含全局状态值的问题。

componentDidUpdate(prevProps){

        if(prevProps.questions !== this.props.questions){    
            this.props.getQuestions();
        }

    }

将状态连接到道具

const mapStateToProps = state => ({
  questions: state.question.questions
});

当我尝试比较prevState和当前状态之间的数组长度时，永远不会触发该方法。

    componentDidUpdate(prevProps){

        if(prevProps.questions.length !== this.props.questions.length){    
            this.props.getQuestions();
        }

    }

如何使其起作用，因此仅在更新数组时才触发此方法？

Answer 1

简单数组比较不起作用。它将始终符合您的条件，即。总是不相等。因此，componentDidUpdate不断触发。相反，您应该像这样检查它：

if(JSON.stringify(prevProps.questions) !== JSON.stringify(this.props.questions)){    
   this.props.getQuestions();
}

关于使用length属性进行检查，它应该可以正常工作。但是您说它不起作用。似乎使用getQuestions时得到的数组相同。正确检查该功能以获取更新的问题。

Answer 2

您的起火条件不正确，通过比较数组的长度可以看到。您正在检查数组引用的相等性，但这始终是不正确的（尽管不确定redux如何处理prop更新）。

您可以深入比较问题的具体程度，可以比较问题的长度，问题的questionId等。循环浏览并根据需要进行标识。

您甚至可以使用lodash https://lodash.com/docs之类的库来比较数组的属性和特定属性。

Answer 3

如果questions是mapStateToProps（）中的唯一属性，则可以确保在更新它的任何地方创建一个新数组

newState.question.questions = [...updatedArray];

并从componentDidUpdate中完全删除if语句。

确保在调用questions时不更新getQuestions()数组，这样做会导致无限循环，在该循环中您的didUpdate函数会导致更新（触发didUpdate，无限时触发）

componentDidUpdate正在持续触发或从不触发

3 个答案: