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

Question

我的问题是我想显示一个带有defaultvalue = {true}if的 Switch 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>

         );
      }
}

标签： javascriptreactjsreact-nativereduxreact-redux

Answer 1

考虑到getParameteres4GAction()是一个 API 事件，您将不得不让您的 componentDidMount 循环等待 API 调用完成。尝试这个

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

分享你的完整代码..我可以告诉你，它是如何工作的..