javascript - 在渲染 React 组件之前等待 AJAX 调用完成

Question

假设我有以下代码:

componentDidMount() {
    $.ajax({
        type: 'GET',
        url: '/data/',
        dataType: 'text',
        success: function(response) {
            this.setState({data: response})
        }.bind(this)
    });
}

render() {
    let {rows} = this.state.data
    return (
            <div>
                WOW
                {this.state.data}
                <FilterTable rows = {this.state.data} />
            </div>
        );
}

如何才能使 render() 部分在 ajax 调用完成之前不执行？

谢谢!

编辑:固定代码。

Answer 1

我宁愿选择一种非常简单的方法。我将有一个名为例如“show”的状态，最初将值设置为 false。在回调中成功返回 ajax 后，会将“show”的值设置为 true。并在渲染中根据“show”的值在返回中挂载 jsx 代码。

componentDidMount() {
    $.ajax({
        type: 'GET',
        url: '/data/',
        dataType: 'text',
        success: function(response) {
            this.setState({data: response, show: true});
        }.bind(this)
    });
}

render() {
    let {rows} = this.state.data
    return (
            <div>
                WOW
                {this.state.show === true : <div>
                  {this.state.data}
                  <FilterTable rows = {this.state.data} />
                </div>: null
                }

            </div>
        );
}