reactjs - 将带有 typescript 的 reactjs 应用程序连接到 SharePoint Online 以进行本地开发时出错
问题描述
我是 TypeScript 和 reacjs 的新手。
当我想将 React-Typescript 与 SharePoint online 连接以进行本地开发时,我总是收到以下错误类型错误:属性 'listInformation' 在类型'Readonly<{}>' 上不存在。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;
谢谢你帮我解决这个问题。
解决方案
您必须在 typescript 中将状态声明为接口。
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>
. 您可能还需要在接口的状态对象中声明每个属性。不完全确定。
推荐阅读
- delphi - 是否有一种简单的方法可以复制包含其内容但没有子文件夹的文件夹?
- python - Windows - 创建 venv 到 python3.8?
- laravel - 如何使用 Laravel DB Query 和 MongoDB 加入集合?
- flutter - 如何从 Firebase 检索数据以显示产品
- java - 无法理解远程对等方在 pjsip 中停止了其视频
- python - 我正在尝试使用 Python 和 Selenium 拖放多个 jQuery 列表元素
- assembly - 如何使用 easy68K 编辑器/汇编器以“横幅”格式显示字母?
- docker - 仅从 .yarn/cache 获取生产依赖项以构建 Docker 映像
- java - 如何在 nav_graph.xml 中使用 parcelable safe arg 和 android 中的导航组件
- nuget - 如何制作用于发布的 nuget 下载包?