使用 React 和 PnPJS 更新 SharePoint spfx 中的数组

Question

我正在创建一个web应用程序，允许用户更新他们的状态和位置。

我在SharePoint上有一个数据列表表，其中包含用户名、电子邮件地址、状态(例如：联机、脱机或繁忙(、位置(这是一个选择字段(以及其他字段。

网络应用程序只有两个不同的选择字段。这允许用户更新他的状态和位置。

当用户访问componentDidMount()上的页面时，我会获取用户的电子邮件地址(因为他已登录SharePoint(，然后过滤数据列表数组以查看其信息的元素(因此在MyList中查找他的电子邮件地址。我现在遇到的问题是用用户选择的所选响应更新MyList列表。

使用PnP JS，我发现这应该是可能的，这里有两个显示update()函数的链接。https://github.com/SharePoint/PnP-JS-Core/wiki/Basic--Operations

https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-项目

我的代码在这里找到：

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

Answer 1

首先，不应该获取列表中的所有项目，然后为当前用户进行筛选，而应该只获取当前用户的项目。一旦您的列表变大，您将通过检索所有项目来执行大量开销。

其次，您在评论中提到的是，您需要指定要更新的项目的ID。因此，在componentDidMount中，在获得当前用户的列表项后，将该项保存在您的状态中。

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(，而不是更新。