未从检索到的 SharePoint 列表中获取数据答案

【问题标题】：Data not fetching from retrieved SharePoint list未从检索到的 SharePoint 列表中获取数据
【发布时间】：2019-08-01 11:05:02
【问题描述】：

SharePoint 列表数据未提取到反应表。

我已经安装了 react-table 组件并按照上述方法进行了尝试。正在从 SharePoint 列表中检索数据（可以通过控制台查看）。但它并没有被带到桌子上。而且也不可能设置为状态。即使它没有显示为错误。

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();
   }
 });
}
}

【问题讨论】：

标签： reactjs sharepoint-online react-table spfx

【解决方案1】：

以下示例供您参考。

<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>

如果您使用 SPFx Web 部件，解决方案在这里：Create SPFx Web Part to retrieve SharePoint List Items using REST API and React

【讨论】：

我试过这个。它正在工作。但我需要配置这个 React 框架（在创建 SPFX 应用程序时选择 React 框架）。我已经想通了。我必须使用let list = this.state.data1

【解决方案2】：

看起来渲染方法没有在等待您的异步 API 调用。这里的解决方案是在渲染方法中添加条件，如下所示。

{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>
}

如果需要，添加更多条件。

【讨论】：