主页 / 问题 / 1453706
Accepted
Zhihar
Asked:2022-10-03 19:14:32 +0000 UTC2022-10-03 19:14:32 +0000 UTC

react: 在组件构造函数中使用 setState 进行异步操作

  • 772

在构造函数的组件中，我向服务器发出请求以获取必要的数据并将它们异步添加到状态中：

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}</>;
    }
}

我得到一个警告，我应该在构造函数中使用直接状态设置：

警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。相反，在 MyComponent 组件中直接分配this.state或定义state = {}; 具有所需状态的类属性。

请告诉我如何纠正此问题并消除警告。

javascript

1 个回答

  1. Best Answer

    用于componentDidMount执行此类操作。您可以在https://reactjs.org/docs/阅读有关 React 生命周期的更多信息

    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
        }            
    }
}
    • 2

相关问题