Question

我是TypeScript和reacjs的新手。

当我想将React-Typescript与SharePoint在线连接以进行本地开发时，我总是会收到以下错误消息类型错误：类型'Readonly <{}>'不存在属性'listInformation'。 TS2339

属性listInformation应该不存在，但确实存在。以下代码是我已经拥有的。当我在没有TypeScript的React应用程序上尝试此操作时，运行此代码没有问题。

import React, { Component, Props } from 'react';
import { initializeIcons } from '@uifabric/icons';
import { NavHeader } from './NavHeader';
import { Navigation } from './Navigation';
import { DetailsList, IColumn } from 'office-ui-fabric-react';

initializeIcons();

class Templates extends Component{
  constructor(props: {}) {
    super(props);
    this.state = {
      listInformation:[{
          Title: '',
          DocumentSetDescription: '',
          OData__UIVersionString:'',
          Type_x0020_of_x0020_Template:'',
          Functional_x0020_area:'',
          ContentTypeId:''}
      ]
    };
}  

componentDidMount() {  
  // Custom function to retrieve the list info  
  this.GetListInfo();  
}  

GetListInfo(){  
  var reactHandler = this;  

  var request = new XMLHttpRequest();  
  request.open('GET', "/_api/web/lists/getbytitle('Templates')/items", true);  
  request.setRequestHeader("Accept","application/json");  

  //this callback gets called when the server responds to the ajax call  
  request.onreadystatechange = function(){  
      if (request.readyState === 4 && request.status === 200){  
          var result = JSON.parse(request.responseText);  

          reactHandler.setState({  
            listInformation: result.value  
          });  
      }  
      else if (request.readyState === 4 && request.status !== 200){  
          console.log('Error in retrieving data!');  
      }  
  };  
  request.send();  
} 

  public render() {
   this.state.listInformation.map(function(info,key){
    if(info.ContentTypeId === '0x0120D52000C935C192A6B8E84F80068B394AAEF962'){ 
      let listInfo = [{Name: info.Title , Description: info.DocumentSetDescription, Version: info.OData__UIVersionString, Type_of_template: info.Type_x0020_of_x0020_Template, Functional_area: info.Functional_x0020_area}]
    }
  }) 
    return (
      <div> 
          <div>
              <NavHeader />
          </div>
          <div>
              <Navigation />
          </div>

          <div>
              <h1>TEMPLATES</h1>
              <DetailsList items={listInfo} columns={columns}/>
          </div>
       </div>
    );
  }
}

export default Templates;

我以以下网站为例https://www.c-sharpcorner.com/article/retrieve-and-display-sharepoint-list-items-using-rest-api-and-reactjs/

感谢您的帮助。

Answer 1

您必须在打字稿中将状态声明为接口。

export interface MyState{
  listInformation: any[];
}

class Templates extends Component<any, MyState>{
  constructor(props: {}) {
    super(props);
    this.state = {
      listInformation:[{
          Title: '',
          DocumentSetDescription: '',
          OData__UIVersionString:'',
          Type_x0020_of_x0020_Template:'',
          Functional_x0020_area:'',
          ContentTypeId:''}
      ]
    };
}

您还可以为可能需要导出的道具创建接口-可以将其作为副状态导出为<MyProps, MyState>。您可能还需要在接口内的状态对象内声明每个属性。不太确定。

将带有打字稿的reactjs应用与打字稿连接到在线SharePoint进行本地开发时出错

1 个答案: