react: использование setState в конструкторе компонента при асинхронных операциях

Question

в компоненте в конструкторе делаю запрос на сервер для получения необходимых данных и асинхронно вношу их в состояния:

class MyComponent extends Component<any, any> {

    // конструктор
    constructor(
        props: any
    ) {
        super(props);

        // задать состояние компонента
        this.state = {
            data: [1, 2, 3]
        };

        // отправить запрос на сервер
        to_server().then((output: any) => {
            // установить состояния
            this.setState({
                data: output.data,
            });
        });    
    }

    // отрисовать компонент
    render() {
        return <>{this.state.data.length}</>;
    }
}

и получаю предупреждение о том, что в конструкторе надо использовать прямую установка состояний:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the MyComponent component.

Подскажите как покорректнее решить данную проблему и избавиться от предупреждения.

Answer 1

Используйте componentDidMount для выполнения таких действий. Более подробнее о жизненных циклах React можно почитать на https://reactjs.org/docs/

class MyComponent extends Component<any, any> {

    // конструктор
    constructor(
        props: any
    ) {
        super(props);

        // задать состояние компонента
        this.state = {
            data: []
        };   
    }
    
    componentDidMount() {
        // отправить запрос на сервер
        to_server().then((output: any) => {
            // установить состояния
            this.setState({
                data: output.data,
            });
        }); 
    }

    // отрисовать компонент
    render() {
        if (this.state.data.length) {
            return <>{this.state.data.length}</>;
        } else {
            return <>Waiting data...</>; // или возвращать null
        }            
    }
}

БЛОГ НА HUSL

react: использование setState в конструкторе компонента при асинхронных операциях

Ответы (1 шт):