Data not fetching from retrieved SharePoint list

Question

SharePoint list data not fetching to the react table.

I have installed react-table component and tried as mentioned. Data is retrieving from SharePoint list (can see through the console). But it's not fetching to the table. And also it's not possible set to the state. Even it is not showing as an error.

export default class ApprovalDashboard extends  React.Component<IApprovalDashboardProps, {}> {

public constructor(props: IApprovalDashboardProps) 
{
 super(props);
 this.state = 
 {
  items: [],
  data1: []
 }
}

public datass = [];
public render():React.ReactElement<IApprovalDashboardProps> {
 var test = this;
 const datas = test.datass;
 console.log("Datas from constant: ", datas);

 return (
 <div>
  <ReactTable
   data={this.datass}
   columns=
   {[
    {
     Header: 'List ID',
     accessor: 'Id'  
    },
    {
     Header: 'Person ID',
     accessor: 'PersonId'  
    }
   ]}
   defaultPageSize={5}
   filterable
   />
  </div>
 );
}

public componentDidMount() 
{
 const url = `${this.props.siteurl}/_api/web/lists/getbytitle('RecommendationGroup')/items`;

 var self = this;
 $.ajax({
   url: url,
   type: "GET",
   headers: 
   {
    'Accept': 'application/json; odata=verbose;'
   },
   success: (data) => 
   {
    self.setState({
     data1: data.d.results
     console.log("Data: ", self.datass);
    });
    self.datass = data.d.results;
   },
   error: (jqXHR, textStatus, errorThrown) => 
   {
    console.error();
   }
 });
}
}

Answer 1

The following example for your reference.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script> 
<div id="TestListData"></div>
<script type="text/babel">
var tableStyle  =    { 
    display: "table",
    marginLeft : "40px"
}

var divStyle = {
    background: "#eee",
    padding: "20px",
    margin: "20px"
};

var headerCaptionStyle = {
    background: "#4B6978",
    display: "table-cell",
    border: "solid",
    textAlign : "center",
    width : "500px",
    height : "30px",
    paddingTop : "3px",
    color : "white",
    marginLeft : "80px",
    display : "block"
};

var headerStyle = {
    background: "#4B6978",
    display: "table-cell",
    border: "solid",
    textAlign : "center",
    width : "100px",
    height : "30px",
    paddingTop : "10px",
    color : "white"
};

var tableCaptionStyle = {
    background: "#c6e2ff",
    display: "block",
    fontSize : "20px",
    fontWeight: "bold",
    border: "solid",
    textAlign : "center",
    width : "650px",
    height : "30px",
    paddingTop : "3px",
    borderRadius: "25px",
    marginLeft : "30px",
    marginTop : "20px"
}


var rowCaptionStyle = {
    width : "600px",
    display :  "table-caption",
    background: "#4B6978",
    textAlign : "center",
    padding: "20px",
    fontSize : "20px",
    fontWeight :"bold",
    color : "white"
};

var rowStyle = {
    display :  "table-row",
    background: "#eee",
    padding: "20px",
    margin: "20px",
    fontWeight :"bold"
};
var CellStyle  =    { 
    display: "table-cell",
    border: "solid",
    borderColor : "white",
    textAlign : "center",
    width : "100px",
    height : "30px",
    paddingTop : "10px"
} 

class ReactSP extends React.Component{ 
    debugger;
    constructor(){ 
        super(); 
        this.state = { 
            items: [ 
                { 
                    "ID": "", 
                    "PersonId": ""
                } 
            ] 
        };    
    }           
    componentDidMount() { 
        debugger;
        this.RetrieveSPData(); 
    }    
    RetrieveSPData(){
        var reactHandler = this;
        var spRequest = new XMLHttpRequest();
        spRequest.open('GET', "/sites/lz/_api/web/lists/getbytitle('RecommendationGroup')/items",true);
        spRequest.setRequestHeader("Accept","application/json");             
        spRequest.onreadystatechange = function(){
            if (spRequest.readyState === 4 && spRequest.status === 200){
                var result = JSON.parse(spRequest.responseText);
                reactHandler.setState({ 
                    items: result.value
                });
            }
            else if (spRequest.readyState === 4 && spRequest.status !== 200){ 
              console.log('Error Occurred !'); 
            }
        };
        spRequest.send();
    }  
    render(){
        debugger;
         return (
            <div>
              <div style={tableStyle}>
                <div style={rowStyle} >
                  <div style={headerStyle}>Item ID</div>
                  <div style={headerStyle}>Person ID</div>
                </div>
                  {this.state.items.map(function(item,key){                      
                    return (<div style={rowStyle} key={key}> 
                        <div style={CellStyle}>{item.ID}</div> 
                        <div style={CellStyle}>{item.PersonId}</div> 
                      </div>);
                  })}
              </div>
            </div>          
        ); 
    }     
}      
ReactDOM.render(<ReactSP />, document.getElementById('TestListData')); 
</script>

If you use SPFx web part, the solution is here: Create SPFx Web Part to retrieve SharePoint List Items using REST API and React

Answer 2

it looks like render method is not waiting for your async API call. here the solution is to add conditions in render method as below.

{this.state && this.state.datass !== undefined && 
<div>
  <ReactTable
   data={this.datass}
   columns=
   {[
    {
     Header: 'List ID',
     accessor: 'Id'  
    },
    {
     Header: 'Person ID',
     accessor: 'PersonId'  
    }
   ]}
   defaultPageSize={5}
   filterable
   />
  </div>
}

add more conditions if needed.