Arrays 使用React&；更新SharePoint spfx中的数组；PnPJS

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

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

web应用程序只是两个不同的选择字段。允许用户更新其状态和位置

当用户访问

componentDidMount（）

上的页面时，我会获取用户的电子邮件地址（因为他已登录SharePoint），然后过滤数据列表数组以查看元素中的信息（因此，在

MyList

中查找他的电子邮件地址。我现在遇到的问题是用用户选择的响应更新

MyList

列表

使用PnP JS，我发现这应该是可能的，这里有两个链接显示了

update（）

函数。

我的代码在这里找到：

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

导出默认类标志定位Web部件扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
状态：“在线”，
地点：'纽约'，
用户名：“”，
获取电子邮件：“”，
已选择用户：{}，
};
this.handleChangeStatus=this.handleChangeStatus.bind（this）；
this.handleChangeLocation=this.handleChangeLocation.bind（this）；
}
handleChangeStatus（事件）{
const{value}=event.target；
this.setState（{Status:value}）；
}
handleChangeLocation（事件）{
const{value}=event.target；
this.setState（{Location:value}）；
}
私人(活动){
event.preventDefault（）；
//这就是我需要帮助更新列表的地方
let list=pnp.sp.web.lists.getByTitle（“MyList”）
//我需要的不是ID，而是我相信的selectUser数组
list.items.getById（1）.update({
状态：this.state.Status，//用户从联机更改为脱机
位置：this.state.Location//用户正在从纽约更改为洛杉矶
}).然后（i=>{
控制台日志（i）；
});
}       
公共组件didmount（）{
if（Environment.type==EnvironmentType.Local）{
}
else if（Environment.type==EnvironmentType.SharePoint | | | Environment.type===EnvironmentType.ClassicSharePoint）{
//这将获取当前用户信息并将其设置为用户名和电子邮件
sp.web.currentUser.get（）。然后（（响应：currentUser）=>{
//控制台日志（响应）；
这是我的国家({
用户名：响应[“标题”]，
getEmail:response[“Email”]，
})
})          
//这将获取列表中所有项的列表
pnp.sp.web.lists.getByTitle（“MyList”）.items.get（）。然后（（items:any[]）=>{
控制台日志（项目）；
//比较来自登录用户的电子邮件和筛选项目数组以获取该元素
var compareEmail=this.state.getEmail；
console.log（compareEmail）；
让selectedUser=\过滤器（项、函数（项）{
return item.Email_x0020_Address.toLowerCase（）==compareEmail.toLowerCase（）；
});
console.log（selectedUser）；
});
}
}
public render（）：React.ReactElement{
返回(
你好{this.state.userName}
入住我们的酒店
在线 的
离线
忙吗？
位置
纽约
密歇根
洛杉矶
);
}
}

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

其次，您在评论中提到的是，您需要指定要更新的项的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);   

---

我还想补充一点，除非你确保用所有可能的用户预先填充列表，并且总是用新用户更新列表，否则最好在你的

\u更新中检查一下，如果
this.state.selectedUser==null | | this.state.selectedUser.ID==null
那么你应该创建一个新项目（并将新项目添加到您的
this.state.selectedUser
），而不是更新。
非常感谢您的详细回复。这确实帮助我更好地理解了如何正确处理此问题。在
pnp.sp.web.lists.getByTitle（“MyList”）.items.filter（“tolower（Email\u x0020\u Address）eq.”+this.state.getEmail.toLowerCase（）+“”）.top（1）.then（（items:any[]）=>{
我得到的一个属性“then”在then（）函数的类型“items”上不存在，我认为
then（）
需要替换为
forEach（）
。但我认为它仍然会导致
top（1）出现问题
？不，对不起，我在
之前漏掉了
get（）
，然后
。我更新了答案，看看效果是否更好。谢谢。那是