arrays - 使用 React 和 PnPJS 更新 SharePoint spfx 中的数组
问题描述
我正在创建一个允许用户更新其状态和位置的网络应用程序。
我在 SharePoint 上有一个数据列表,其中包含用户名、电子邮件地址、状态(例如:在线、离线或忙碌)、位置(这是一个选择字段)以及其他字段。
Web 应用程序只是 2 个不同的选择字段。这允许用户更新他的状态和位置。
当用户访问页面时,componentDidMount()
我正在获取用户的电子邮件地址(因为他已登录 SharePoint),然后过滤数据列表数组以查看元素以获取他的信息(因此在 .IMyList
部分中查找他的电子邮件地址)卡在现在的 m 正在MyList
使用用户选择的选定响应更新列表。
使用 PnP-JS 我发现这应该是可能的,这里有两个显示该update()
功能的链接。
https://github.com/SharePoint/PnP-JS-Core/wiki/Basic--操作
https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items
我的代码在这里找到:
export default class SigninLocationWebpart extends React.Component<ISigninLocationWebpartProps, {Status: string, Location: string, userName: string, getEmail: string, selectedUser: any}> {
constructor(props) {
super(props);
this.state = {
Status: 'Online',
Location: 'New York',
userName: '',
getEmail: '',
selectedUser: {},
};
this.handleChangeStatus = this.handleChangeStatus.bind(this);
this.handleChangeLocation = this.handleChangeLocation.bind(this);
}
handleChangeStatus(event) {
const { value } = event.target;
this.setState({ Status: value });
}
handleChangeLocation(event) {
const { value } = event.target;
this.setState({ Location: value });
}
private _onUpdate(event) {
event.preventDefault();
//This is where I need help on updating list
let list = pnp.sp.web.lists.getByTitle("MyList")
//Instead of getting by ID i need to get by that selectUser array I believe
list.items.getById(1).update({
Status: this.state.Status, //User changing from Online to Offline
Location: this.state.Location //User changing from New York to Los Angeles
}).then(i => {
console.log(i);
});
}
public componentDidMount() {
if (Environment.type === EnvironmentType.Local) {
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
//This gets the current users info and sets it to username and email
sp.web.currentUser.get().then((response : CurrentUser) => {
//console.log(response);
this.setState({
userName: response["Title"],
getEmail: response["Email"],
})
})
//This gets the list of all all items in the list
pnp.sp.web.lists.getByTitle("MyList").items.get().then((items: any[]) => {
console.log(items);
//Comparing email from sign in user and filtering items array to get that element
var compareEmail = this.state.getEmail;
console.log(compareEmail);
let selectedUser = _.filter(items, function(item) {
return item.Email_x0020_Address.toLowerCase() === compareEmail.toLowerCase();
});
console.log(selectedUser);
});
}
}
public render(): React.ReactElement<ISigninLocationWebpartProps> {
return (
<div className={ styles.signinLocationWebpart }>
<h3>Hello {this.state.userName}</h3>
<form onSubmit={this._onUpdate}>
<label>
Check In our Out
</label>
<select name="Status" value={this.state.Status} onChange={this.handleChangeStatus}>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
<option value="Busy">Busy</option>
</select>
<label>
Location
</label>
<select name="Location" value={this.state.Location} onChange={this.handleChangeLocation}>
<option value="New York">New York</option>
<option value="Michigan">Michigan</option>
<option value="Los Angeles">Los Angeles</option>
</select>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
解决方案
首先,您应该只获取当前用户开始使用的项目,而不是获取列表中的所有项目,然后过滤当前用户。一旦列表变大,您将通过检索所有项目来执行大量开销。
其次,您在评论中提到的是您需要指定要更新的项目的 ID。因此,在componentDidMount
您获得当前用户的 List Item 后,将该 Item 保存在您的状态中。
public componentDidMount() {
if (Environment.type === EnvironmentType.Local) {
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
//This gets the current users info and sets it to username and email
sp.web.currentUser.get().then((response : CurrentUser) => {
//console.log(response);
this.setState({
userName: response["Title"],
getEmail: response["Email"],
});
pnp.sp.web.lists.getByTitle("MyList").items.filter("Email_x0020_Address eq '" + this.state.getEmail + "'").top(1).get().then((items: any[]) => {
if (items && items.length) {
this.setState( { selectedUser: items[0] } );
}
});
})
}
}
然后在更新时,您可以使用该项目的 ID 来保存它。
private _onUpdate(event) {
event.preventDefault();
//This is where I need help on updating list
let list = pnp.sp.web.lists.getByTitle("MyList")
//Instead of getting by ID i need to get by that selectUser array I believe
list.items.getById(this.state.selectedUser.ID).update({
Status: this.state.Status, //User changing from Online to Offline
Location: this.state.Location //User changing from New York to Los Angeles
}).then(i => {
console.log(i);
});
}
此外,您需要确保绑定提交处理程序,就像在构造函数中为 onchange 处理程序所做的那样:
this._onUpdate = this._onUpdate.bind(this);
我还要补充一点,除非您确保使用所有可能的用户预先填充列表,并且始终使用新用户对其进行更新,否则最好检查一下您_onUpdate
是否this.state.selectedUser == null || this.state.selectedUser.ID == null
应该创建一个新项目(并将新项目添加到您的this.state.selectedUser
),而不是更新。
推荐阅读
- autodesk-forge - 使用特定设置从 Forge 中的 revit 文件导出 ifc 文件
- python - 登录 Python/Django 未按预期工作
- html - 具有列过滤但宽度与没有相同的数据表
- javascript - Node.js + express如何将字符串添加到请求url?
- excel - 如何将表格的特定部分从工作表复制到另一个工作表
- python - 如何在公共列表中列出每个循环中的输出值?
- c# - Asp.NET 核心项目因 NETSDK1061 失败:项目已使用 Microsoft.NETCore.App 版本恢复
- python - 如何根据指定值对列进行分组并进一步对另一列进行分组并对它们进行计数(Pandas Python)
- c# - C# 7.3 中不提供“使用声明”功能。请使用语言版本 8.0 或更高版本 - 在一台机器上出错,但在另一台机器上工作
- html - :before 伪元素不在 div 中