React 中的状态，如何保留原来的`？

Question

我在 SP 框架应用程序中工作，该应用程序从列表中读取、分组和过滤数据。

为此，我在应用程序中有一个方法可以从 onclick 事件处理程序调用。

此方法仅包含一个开关，用于检查需要调用哪些其他方法。它看起来像这样：

private _handleRequest(request: string): void {
switch (request) {
  case 'Customer':
  case 'Sales Manager':
    this.groupHandler(request);
    break;
  case 'Agreement Ended':
    this.getEnded();
    break;
  case 'Last Price Adjustment':
    this.getPassed();
    break;
  default:
    break;
}

}

groupHandler 方法向 Sharepoint 发送请求以获取所有数据，然后将数据发送到 ListView 组件，该组件将其呈现在屏幕上：

private groupHandler(group: string): void {
group = group.replace(/ +/g, "");
this.setState({
  groupByFields: [{
    name: group,
    order: GroupOrder.ascending
  }]
});

} }

getEnded 和getPassed 几乎是一样的，都是从sharepoint 中获取数据，然后过滤结果，然后发送到ListView 组件。每个方法更新状态：

private getEnded(): void {

this.props.provider.getEnded().then((listItems: IList[]) => {
  this.setState({
    listItems: listItems
  });
});

}

私有 getPassed(): void {

this.props.provider.getPassed().then((listItems: IList[]) => {
  this.setState({
    listItems: listItems
  });
});

}

它是这样初始化的：

export interface IListState {

列表项：IList[]； }

export default class AgreementDatabase extends React.Component { 构造函数（道具：IAgreementDatabaseProps）{ 超级（道具）；

this.state = {
  listItems: []
};


this.groupHandler = this.groupHandler.bind(this);

}

这是 componentDidMount，我在其中使用从 SharePoin 列表获取的数据填充状态：

public componentDidMount(): void {
this.props.provider.getContent().then((listItems: IList[]) => {
  this.setState({
    listItems: listItems
  });
});

}

现在的问题是，当我运行应用程序并单击调用 groupHandler 方法的 link 时，列表毫无问题地进行了分组。当列表分组后，我单击调用 getEnded 或 getPassed 方法的 link 时，问题就出现了。在这种情况下，列表不会在过滤结果之前重新加载。我得到的是一个包含过滤结果的分组列表。我post一些图片，以便更好地理解。

如何重置状态以便每次单击按钮时应用程序在应用过滤或分组之前获取原始状态/值？

此致美国

Answer 1

所以，我想的是在状态中保留一个属性 filter，这是在getPassed()和getEnded()方法中设置的。
例如，在 getPassed() 中，您设置 filter = "passed"；相反，您在 getEnded() 中设置了 filter = "ended"。最后，默认情况下，filter 属性可以设置为 null.

然后，写这样的东西：

/* Inside your Component */
renderPassed = () => {
  const itemToRender = [];

  this.state.listItems.forEach(item => {
    if (item.status === "passed") {
      itemToRender.push(item);
    }
  }

  return itemToRender;
}

renderEnded = () => {
  const itemToRender = [];

  this.state.listItems.forEach(item => {
    if (item.status === "ended") {
      itemToRender.push(item);
    }
  }

  return itemToRender;
}

render() {
  let itemToRender;

  switch (this.state.filter) {
    case "passed": itemToRender = this.renderPassed(); break;
    case "ended": itemToRender = this.renderEnded(); break;
    default: itemToRender = this.state.listItems;
  }

  return <div>{itemToRender}</div>;
}

这确实是一个简化，但我想你可以理解我的想法。
我不知道你知道一个项目是否通过 and/or 结束，我只是假设每个项目中有一个 status 属性。

有帮助吗？可以在你的App中实现吗？

编辑： 请注意，我没有 "reset" 状态。它没有用，因为您有两个选择：

再次执行获取；
将您的原始数据保存到 class 的属性中，但是您会在原始数据和过滤数据中重复一些项目；

Answer 2

我认为我找到了真正的问题，这与状态无关。在渲染方法中，我使用 ListView 来渲染列表，在这个组件中，我使用 groupByFields 属性自动对结果进行分组：

<ListView
        items={this.state.listItems}
        viewFields={this._viewFields}
        groupByFields={this.state.groupByFields}
      />

组来自 groupByFields 状态。

我真正需要做的是在我想过滤时找到停用此 groupByfield 属性的方法，否则不管我如何过滤或操作状态，结果将始终被分组。

你知道这样做的方法吗？或者仅当调用了 groupHandler 方法？

此致美国

Answer 3

我认为我找到了真正的问题，这与状态无关。在渲染方法中，我使用 ListView 来渲染列表，在这个组件中，我使用 groupByFields 属性自动对结果进行分组：

<ListView
        items={this.state.listItems}
        viewFields={this._viewFields}
        groupByFields={this.state.groupByFields}
      />

组来自 groupByFields 状态。

我真正需要做的是在我想过滤时找到停用此 groupByfield 属性的方法，否则不管我如何过滤或操作状态，结果将始终被分组。

你知道这样做的方法吗？或仅在调用 groupHandler 方法时添加此属性的方法？

编辑：我找到了这个解决方案：我调用了一个名为 renderList:

的方法

private _renderList(): any {
if (this.state.filter) {
  return ( <ListView
            items={this.state.filteredListItems}
            viewFields={this._viewFields}
          />)
} else {
  return (<ListView
            items={this.state.originalitems}
            viewFields={this._viewFields}
            groupByFields={this.state.groupByFields}
          />)
}

}

然后我使用状态来查看是否应该呈现过滤器或分组列表

感谢您抽出宝贵的时间，它帮助 med 打破常规思考

此致美国

React 中的状态，如何保留原来的`？

States in React, how to preserve the original`?

state

reactjs

spfx