Reactjs 如何在post（）之后重新加载spfx web部件？

我正在使用React框架创建spfx Web部件。

---

我有一个渲染方法，其中所有控件都被渲染。我在DOM中有一个按钮和几个复选框，当用户单击按钮时，它们将使用post方法

this.context.spHttpClient.post

将数据发送到SharePoint。我能够将数据提交到SharePoint。但一旦我提交了数据，我就无法重新加载spfx Web部件。我必须在不重新加载页面的情况下重新加载web部件。我已尝试再次调用render方法。当然，它可能不是正确的方式，因此它不起作用。

您可以调用强制重新加载或设置状态，如图所示和所示

默认情况下，当组件的状态或道具发生更改时，组件将重新呈现。如果render（）方法依赖于其他数据，则可以通过调用forceUpdate（）告诉React组件需要重新呈现。 调用forceUpdate（）将导致对组件调用render（），跳过shouldComponentUpdate（）。这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate（）方法。React仍将仅在标记更改时更新DOM。

---

通常情况下，您应该尽量避免使用forceUpdate（），并且只从render（）中的this.props和this.state读取数据。“

您应该使用以下方法：

componentDidMount（）

componentDidUpdate（prevProps、prevState、快照）

组件将卸载（）

shouldComponentUpdate（下一步，下一步状态）

更多信息请点击这里

例如，在一个项目中，我有一个按钮列表，然后单击，以便将事件发送到另一个使用状态的组件：

LeftPanel.tsx：

import * as React from 'react';
import { Button } from 'react-bootstrap';
import { Event } from '../interfaces/Event';
import '../components/GruposDeColaboracion.module.scss';
import '../css/leftPanel.css';

export class LeftPanel extends React.Component {
    constructor(public props, public context) {
        super(props, context);
    }

    private getAllGroups = (e) => {
        this.clearState();
        this.setActive('allGroups');
        this.props.setEvent(Event.GET_ALL_GROUPS);
        //e.stopPropagation();
    }

    public render():JSX.Element{
            return (
                <div className="list-group">
                    <Button
                        id="allGroups"
                        onClick={this.getAllGroups}
                        className="list-group-item rounded-0 list-group-item-action btn btn-default active">
                        Todos
                    </Button>
                </div>
            );
    }
}

export class CenterPanel extends React.Component<{}, ICenterPanelState> {
    constructor(public props, public context) {
        super(props, context);
    }

  public componentWillMount() {

        this.state = {
            render: <Spinner />
        };
    }

  public componentWillReceiveProps(nextProps) {
    if (nextProps.event == Event.GET_ALL_GROUPS) {
      let dataForRender = 'Hello';
      this.setState({
        render: <ResponseHandler data = {dataForRender}/>
      });
    }
  }
    public render():JSX.Element{
        return(
        <div>
            {this.state.render}
        </div>
        );
    }
}

import*as React from'React'；
从“react bootstrap”导入{Button}；
从“../interfaces/Event”导入{Event}；
导入“../components/gruposdecollaboracion.module.scss”；
导入“../css/leftPanel.css”；
导出类LeftPanel扩展React.Component{
构造函数（公共道具、公共上下文）{
超级（道具、背景）；
}
私有getAllGroups=（e）=>{
this.clearState（）；
此.setActive（'allGroups'）；
this.props.setEvent（Event.GET_ALL_组）；
//e、 停止传播（）；
}
public render（）：JSX.Element{
返回(
待办事项
);
}
}

MainPanel.tsx：

import * as React from 'react';
import { LeftPanel } from '../views/LeftPanel';
import { CenterPanel } from '../views/CenterPanel';
import { IHomeState } from '../interfaces/IHomeState';

export class MainPanel extends React.Component<{}, IMainState> {

    constructor(public props, public context) {
        super(props, context);
        this.state = {
            event: null
        };
    }

    private getEvent = (event) => {
        this.setState({ event: event });
    }

    public shouldComponentUpdate(nextProps, nextState): boolean {
        if (this.state.event != nextState.event) {
            return true;
        }
        return false;
    }

    public render(): JSX.Element {
            return (
                <div className="row">
                    <div className="col-md-2" style={{ maxWidth: '250px' }}>
                        <LeftPanel setEvent={this.getEvent} />
                    </div>
                    <div className="col-md-10">
                        <CenterPanel event={this.state.event} context={this.props.context} />
                    </div>
                </div>
            );
        }
}

import*as React from'React'；
从“../views/LeftPanel”导入{LeftPanel}；
从“../views/CenterPanel”导入{CenterPanel}；
从“../interfaces/IHomeState”导入{IHomeState}；
导出类主面板扩展React.Component{
构造函数（公共道具、公共上下文）{
超级（道具、背景）；
此.state={
事件：null
};
}
私有getEvent=（事件）=>{
this.setState（{event:event}）；
}
public shouldComponentUpdate（nextrops，nextState）：布尔值{
if（this.state.event！=nextState.event）{
返回true；
}
返回false；
}
public render（）：JSX.Element{
返回(
);
}
}

CenterPanel.tsx：

import * as React from 'react';
import { Button } from 'react-bootstrap';
import { Event } from '../interfaces/Event';
import '../components/GruposDeColaboracion.module.scss';
import '../css/leftPanel.css';

export class LeftPanel extends React.Component {
    constructor(public props, public context) {
        super(props, context);
    }

    private getAllGroups = (e) => {
        this.clearState();
        this.setActive('allGroups');
        this.props.setEvent(Event.GET_ALL_GROUPS);
        //e.stopPropagation();
    }

    public render():JSX.Element{
            return (
                <div className="list-group">
                    <Button
                        id="allGroups"
                        onClick={this.getAllGroups}
                        className="list-group-item rounded-0 list-group-item-action btn btn-default active">
                        Todos
                    </Button>
                </div>
            );
    }
}

export class CenterPanel extends React.Component<{}, ICenterPanelState> {
    constructor(public props, public context) {
        super(props, context);
    }

  public componentWillMount() {

        this.state = {
            render: <Spinner />
        };
    }

  public componentWillReceiveProps(nextProps) {
    if (nextProps.event == Event.GET_ALL_GROUPS) {
      let dataForRender = 'Hello';
      this.setState({
        render: <ResponseHandler data = {dataForRender}/>
      });
    }
  }
    public render():JSX.Element{
        return(
        <div>
            {this.state.render}
        </div>
        );
    }
}

导出类中心面板扩展React.Component{
构造函数（公共道具、公共上下文）{
超级（道具、背景）；
}
公共组件willmount（）{
此.state={
提供：
};
}
公共组件将接收道具（下一步）{
if（nextrops.event==event.GET\u所有组）{
让dataForRender='Hello'；
这是我的国家({
提供：
});
}
}
public render（）：JSX.Element{
返回(
{this.state.render}
);
}
}

ResponseHandler.tsx：

import * as React from 'react';

export class ResponseHandler extends React.Component {

    constructor(public props, public context) {
        super(props, context);
    }

    public render():JSX.Element {

        return (
            <div>
                {this.props.data}
            </div>
        );
    }
}

import*as React from'React'；
导出类ResponseHandler扩展React.Component{
构造函数（公共道具、公共上下文）{
超级（道具、背景）；
}
public render（）：JSX.Element{
返回(
{this.props.data}
);
}
}

在本例中，您可以看到：

左面板使用此.props.setEvent（“自定义事件”）从主面板发送事件

在主面板private getEvent=（event）=>{…}中，接收事件并更改状态，在呈现方法中，我有：。您可以在类中心面板中看到更改prop事件的event={this.state.event}

在中间面板中，公共组件将接收Props（nextProps）{..}接收事件并使用状态进行渲染