在渲染 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>
        );
}

Answer 2

我假设您只想在收到数据时呈现组件。 下面的代码片段在 ajax 调用成功时呈现该组件。 React 具有允许我们在 DOM 中动态挂载组件的函数。 您将需要导入 react-dom。

import ReactDOM from 'react-dom';

componentDidMount() {
  $.ajax({
    type: 'GET',
    url: '/data/',
    dataType: 'text',
    success: function(response) {
        this.setState({data: response})
        ReactDOM.render(<FilterTable rows = {response} />,document.getElementById('filterTableContainer'));
    }.bind(this)
});
}    
render() {
let {rows} = this.state.data
return (
        <div>
            WOW
            {this.state.data}
            <div id="filterTableContainer"></div>
        </div>
    );
}

Answer 3

你可以有一个布尔值来切换你的内容的显示并在 AJAX 响应中翻转它。

您可以将此布尔值应用于 CSS 属性，或作为一个整体应用于整个 DIV 内容。

下面是一个可行的解决方案。 它不会阻止 Render 被调用，它只会从视图中隐藏依赖于数据的元素，直到收到调用响应。

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

render() {
    let {data, show} = this.state;

    let containerStyle = {
        display: show ? 'block' : 'none'
    };

    return (
            <div style={containerStyle}>
                WOW
                {this.state.pools}
                <FilterTable rows = {this.state.data} />
            </div>
        );
}

Answer 4

如果您不希望在 Ajax 调用完成之前呈现此组件，那么您应该质疑为什么在 Ajax 调用完成之前加载此组件。 如果你想让组件渲染 this.state.pools 而不管你是否有 this.state.data，我建议你的渲染方法 simple 有条件地渲染 FilterTable。

    render() {
      let filterTable;
      if (this.state.data && this.state.data.length > 0) { // assuming an array
        filterTable = (
            <FilterTable rows = {this.state.data} />
        );
      }
      return (
        WOW
        {this.state.pools}
        {filterTable}
      );
} 

但是，如果您只想在拥有 this.state.data 时进行渲染，最好让此组件的父级执行 Ajax 调用，并且仅在必要信息可用时才创建此组件。 通常，如果您立即更改 componentDidMount 中的 Components 数据，您应该简单地将该信息作为 prop 传递。