componentDidMount 和 componentWillMount() 无法使用 ajax React 处理数据表

Question

我想在加载响应数据之前使用 AJAX 加载我的数据表。
数据正在更新，但表格确实在视图上正确加载

在表格底部显示NO DATA AVAILABLE ON THE TABLE，并且在搜索后清除dataTable 的搜索栏时，数据不再加载。

有没有办法在挂载组件之前在 React 上使用 AJAX 响应数据
我已经使用 componentWillMount 和 componentDidMount 但表格无法正常工作

我正在使用下面的代码来显示。

 component[Will/Did]Mount() {

   $.ajax({
      type:'GET',
      url: 'http://jsonplaceholder.typicode.com/posts',
      success:function(data){

        var obj = []; 
        for (var i = 0; i < 2; i++) {
          obj[i] = {
            'id': data[i].id,
            'name': data[i].title,
            'desc': data[i].body     
          };
        }
        this.setState({TRs: obj})

     }.bind(this)
   })

 }

你可以在这里访问该项目@codepen Crud React Table
希望你能帮我解决这个问题

Answer 1

实际上，您可以在此处使用“变通”方式，基于 React 的组件生命周期。

所以，想法是使用state（假设它的名字是renderTextOnly），最初会在构造函数中设置，然后在ajax回调中更改：

• 首先，当状态尚未更新时，您的表上会显示“NO DATA AVAILABLE ON THE TABLE”
• 然后，在 ajax 回调中（新数据到来后）只需重新设置该状态，并在表格上显示您的数据

真正的代码可能类似于：

constructor (props) {
    super(props);

    this.state = {
        renderTextOnly: true,       
    };

}

 component[Will/Did]Mount() {

   $.ajax({
      type:'GET',
      url: 'http://jsonplaceholder.typicode.com/posts',
      success:function(data){

        var obj = []; 
        for (var i = 0; i < 2; i++) {
          obj[i] = {
            'id': data[i].id,
            'name': data[i].title,
            'desc': data[i].body     
          };
        }
        this.setState({TRs: obj, renderTextOnly: false});

     }.bind(this)
   })

 }

_renderTextOnly() { 
    // here just returns a simple div with your text
    return (
        <div style={{}}>
            NO DATA AVAILABLE ON THE TABLE
        </div>          
    );
}   

render() {
    if (this.state.renderTextOnly) {
        return this._renderTextOnly();
    }       
    //display your table here, this will not change your logic, just need to add the above 3 lines for this render method
    return (
        <div>RENDER YOUR TABLE HERE</div>       
    );
}

以上方式在我的实际项目中使用过，如有错误欢迎尝试在这里发布，谢谢！