ReactJs：状态变化的渲染进入无限循环

问题描述

在这里，我试图在同级组件A和B之间传递数据，在此我希望在组件A中的异步事件完成后重新呈现组件B。

    class ParentComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                valueKey: '',};
        }
    
        parentFunction(dataFromChild) {
            this.setState({ valueKey: dataFromChild });
        }
        render() {
            const { valueKey } = this.state;
            
            return (
                <div>
                    <componentA
                      url={url}
                      ...
                      functionCallFromParent={() => this.parentFunction()}
                    />
                    <componentB valueFromParent={valueKey} />
                </div>
            );
        }
    }

class componentA extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: null,};
        // asynchronous request made to server which updates the state when response received.
        this._getTiles();
    }

render() {
        const { items } = this.state;
        

        if (items && items.asArray().length > 0) {
            functionCallFromParent('Hello From Child1');
            return (
                <div>
                    {tiles}
                </div>
            );
        }

        return null;
    }
}

问题是，每次componentA调用functionCallFromParent（）时，都会执行ParentComponent的呈现，然后重新渲染componentA和componentB，然后此循环继续。鉴于我只希望在组件A要求时重新渲染组件B。

解决方法

functionCallFromParent()放在render()的{​​{1}}内部，这意味着每次渲染/重新渲染组件时都会调用它，这会发生很多！发生这种情况时，将调用ComponentA来设置其自己的状态，从而导致自身及其子级的重新渲染，这就是创建循环的方式。您应该将其移至接收响应的代码部分。