无限取数循环

Question

一旦我打开我的DocumentViewer抓取无限循环，我不明白为什么会发生这种情况，可能有人会看到问题在哪里，它与状态和属性有关，但我不知道为什么，知道问题是什么以及如何解决它将是令人惊讶的

class GeneralDocPresenter extends React.Component {

state = {
    metaInfoDocs: [],
    docs: [],
    loading: false
};

updateDoc = () => {
    this.props.selectedDocsStore.clear();
    this.props.selectedDocsStore.setViewDocId(0);
    this.setState({ loading: true });
    this.props
        .fetchMetaDocs()
        .then((r) => this.setState({ metaInfoDocs: r.data, loading: false }))
        .catch((err) => {
            this.setState({ loading: false });
            errorWithMessage("Could not load documents");
        });
    this.props.eventManager.on("viewDoc", (doc) => {
        this.loadDocuments(doc.id);
    });
};

componentDidUpdate(prevProps, prevState, snapshot) {
    this.updateDoc()
}

componentDidMount() {
    this.updateDoc()
}

render() {

    return <Translation>
        {(t) => {
            if (this.state.loading) {
                return (
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <Spin size={"medium"}/>
                    </div>
                )
            }
            if (this.state.metaInfoDocs.length === 0) {
                return (
                    <div style={{display: 'flex', justifyContent: 'center'}}>
                        <NoDocumentsAlert><div dangerouslySetInnerHTML={{__html: t('noDocuments')}}/></NoDocumentsAlert>
                    </div>
                )
            }
            return (
                <DocViewWrapper docs={this.state.docs}
                                metaInfoDocs={this.state.metaInfoDocs.map(doc => {
                                    return {...doc, type: this.props.type}
                                })}
                                eventManager={this.props.eventManager}
                                settings={this.props.settings}
                                childComponents={this.props.childComponents}
                />
            )
        }}
    </Translation>
}

loadDocuments(id) {
    this.props.loadDocument(id).then(r => {
        this.setState({
            docs: r.data
        })
    });
}

}

Answer 1

尝试从替换ComponentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {
    this.updateDoc()
}

至

componentDidUpdate(prevProps, prevState, snapshot) {
   if(this.props !== prevProps){
    this.updateDoc()
   }
}

你可以更具体地检查didUpdate，而不是检查完整的道具更改。