Блог

Главная - Вопросы по программированию - ReactJS: рендеринг при изменении состояния, попадающий в бесконечный цикл

ReactJS: рендеринг при изменении состояния, попадающий в бесконечный цикл

#javascript #reactjs #react-redux #jsx

#javascript #reactjs #react-redux #jsx

Вопрос:

Здесь я пытаюсь передать данные между родственными компонентами A и B, где я хочу повторно отобразить компонент B после завершения асинхронного события в компоненте A.

     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 amp;amp; items.asArray().length > 0) {
            functionCallFromParent('Hello From Child1');
            return (
                <div>
                    {tiles}
                </div>
            );
        }

        return null;
    }
}

Проблема в том, что каждый раз, когда ComponentA вызывает functionCallFromParent(), выполняется рендеринг ParentComponent, и он повторно отображает ComponentA и ComponentB, и этот цикл продолжается. В то время как я хочу, чтобы только ComponentB повторно отображался, когда ComponentA запрашивает это.

Комментарии:

1. Вы должны вызывать functionCallFromParent внутреннюю часть асинхронного кода (предположительно _getTiles ), а не в функции рендеринга

2. @maya_nk99 но у меня нет нажатия кнопки или какого-либо пользовательского события.. Компонент B необходимо повторно отобразить по завершении асинхронного события, которое происходит в ComponentA

3. если asArray() функция в Javascript? Я думаю, что это на Python

4. Каждый раз, когда вы устанавливаете состояние, это вызывает повторный рендеринг компонентов, которые используют это состояние. Таким образом, это вызывает бесконечный цикл.

Ответ №1:

functionCallFromParent() помещается внутрь render() , ComponentA что означает, что он будет вызываться каждый раз, когда компонент отображается / повторно отображается, что случается довольно часто! Когда это произойдет, ParentComponent.parentFunction() будет вызван, чтобы установить свое собственное состояние, которое, в свою очередь, вызывает повторный рендеринг для себя и своих собственных дочерних элементов, и именно так создается цикл. Вы должны переместить это в ту часть кода, где вы получаете ответ.