Question

我希望在安装响应数据之前使用AJAX加载我的dataTable。
数据正在更新，但表格在视图上正确加载

在表格的底部显示在桌面上没有数据，并且在搜索后清除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回调中更改：

首先，当状态尚未更新时，您在桌面上显示“桌面上没有数据”
然后，在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>       
    );
}

上面的方法在我的实际项目中使用，请随时尝试在这里发布一些错误，谢谢！

componentDidMount和componentWillMount（）不使用ajax React处理数据表

1 个答案: