在显示开关组件之前如何等待API响应

问题描述 投票:0回答:2

我的问题是,如果要显示defaultvalue = {true},则要显示带有this.state.params4GInfo.status4G = 1的开关,否则要显示具有defaultvalue = {false}的开关。但是这里的问题是this.state.params4GInfo.status4G在开始时等于undefined,然后在渲染组件后将其取值为1。所以我该如何等待this.state.params4GInfo.status4G取1?

这是我的组件:

class MyComponent extends React.Component {

    componentDidMount(){
        this.props.getParameteres4GAction()
    }


    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.params4GInfo !== prevState.params4GInfo && nextProps.params4GInfo) {
            return {params4GInfo: nextProps.params4GInfo,status:nextProps.params4GInfo.status4G};
        } 
        else {
            return null;
        }

    }
    render() {
      return (
        <div>

            <Form onSubmit={this.handleSubmitModeConnection}>
                    {console.log("statussss",this.state.status)}
                    <div className="sn-4GSetup-switchPos">
                        {console.log("statusssss",this.state.status)}
                        {this.state.params4GInfo.status4G !== undefined && 
                         this.state.params4GInfo.status4G == 1 ?
                            <div>
                            <Switch
                             onChange={this.changeHandlerActivied}
                             defaultChecked={true}
                      />
                            </div>:<div>
                                {console.log("i'm hereeeee")}
                            <Switch
                             onChange={this.changeHandlerActivied}
                             defaultChecked={false}
                      />
                            </div>}
                    </div>
                </Form>

         );
      }
}
javascript reactjs react-native redux react-redux
2个回答
0
投票

考虑getParameteres4GAction()是一个API事件,您将必须使componentDidMount周期等待API调用完成。试试这个

async componentDidMount(){
    await this.props.getParameteres4GAction()
}

分享您的完整代码。我可以向您展示它的工作方式。


0
投票

您可以将条件更改为

this.state.params4GInfo.status4G == undefined || this.state.params4GInfo.status4G == 1
© www.soinside.com 2019 - 2024. All rights reserved.