首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用React & PnPJS更新SharePoint spfx中的数组

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

Stack Overflow用户
提问于 2020-03-13 23:13:37
回答 1查看 1.5K关注 0票数 0

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

我在SharePoint上有一个数据列表,其中包含用户名、电子邮件地址、状态(例如:在线、离线或忙碌)、位置(这是一个选择字段)以及其他字段。

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

当用户访问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:-Items

我的代码可以在这里找到:

代码语言:javascript
运行
复制
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>
        );
    }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-14 01:21:27

首先,不是先获取列表中的所有项,然后过滤当前用户,而是一开始只获取当前用户的项。一旦列表变得很大,您将通过检索所有项来执行大量开销。

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

代码语言:javascript
运行
复制
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来保存它。

代码语言:javascript
运行
复制
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处理程序一样:

代码语言:javascript
运行
复制
this._onUpdate = this._onUpdate.bind(this);   

我还要补充的是,除非你已经确保用所有可能的用户预先填充列表,并且总是用新用户更新它,否则最好在你的_onUpdate中添加一个检查,如果是this.state.selectedUser == null || this.state.selectedUser.ID == null,那么你应该创建一个新项目(并将新项目添加到你的this.state.selectedUser中),而不是更新。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60672942

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档