将Json数据与React状态一起使用。无法获得正确的数据

时间:2017-10-13 12:44:02

标签: javascript reactjs

我有一个(SharePoint Framework)反应示例使用休息调用。工作正常。 这是最重要的代码:

    export interface IReactGetItemsState{  
    items:[  
    {  
      "EmployeeName": "",  
      "EmployeeId": "",  
      "Experience":"",  
      "Location":""
    }]  
  }  

  export default class ReactGetItems extends React.Component<IReactGetItemsProps, IReactGetItemsState> {

public constructor(props: IReactGetItemsProps, state: IReactGetItemsState){  
  super(props);  
  this.state = {  
    items: [  
      {  
        "EmployeeName": "",  
        "EmployeeId": "",  
        "Experience":"",  
        "Location":""
      }  
    ]  
  };  
}  

public componentDidMount(){
   var reactHandler = this;
   jquery.ajax({
   url: `${this.props.siteurl}/_api/web/lists/getbytitle('EmployeeList')/items`,
   type: "GET",
   headers:{'Accept': 'application/json; odata=verbose;'},
   success: function(resultData) {
   reactHandler.setState({
   items: resultData.d.results
   });
   },
   error : function(jqXHR, textStatus, errorThrown) {
   }
   });
   }

   public render(): React.ReactElement<IReactGetItemsProps> {
    return (  

       <div className={styles.panelStyle} > 
         <br></br>

         <br></br> 
         <div className={styles.tableCaptionStyle} > Demo : Retrieve SharePoint List Items using SPFx , REST API  & React JS  </div>
         <br></br>
          <div className={styles.headerCaptionStyle} > Employee Details</div>
         <div className={styles.tableStyle} >   

           <div className={styles.headerStyle} >  
             <div className={styles.CellStyle}>Employee Name</div>  
             <div className={styles.CellStyle}>Employee Id </div>  
             <div className={styles.CellStyle}>Experience</div>  
               <div className={styles.CellStyle}>Location</div>  

           </div>  
            {this.state.items.map(function(item,key){  

               return (<div className={styles.rowStyle} key={key}>  
                   <div className={styles.CellStyle}>{item.EmployeeName}     </div>  
                   <div className={styles.CellStyle}>{item.EmployeeId}</div>  
                    <div className={styles.CellStyle}>{item.Experience}</div>
                     <div className={styles.CellStyle}>{item.Location}</div>

                 </div>);  
             })}  

         </div>  
       </div>  

所以“items:resultData.d.results”将我的json结果映射到“items”

现在我尝试做同样的事情,但我的json有其他格式,所以“items:resultData.d.results”不起作用。

在我的普通javascript代码中,我会做一个for循环来填充一个数组来存储我的数据。像这样“var someArray = results [i] .Cells.results [2] .Value;”

我不知道如何使用反应来实现相同的效果(我是非常新用的)。

0 个答案:

没有答案