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几乎相似，从共享点获取数据并过滤结果，然后再将其发送到ListView组件。每种方法都会更新状态：

private getEnded(): void {

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

}

private getPassed（）：无效{

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

}

它是这样初始化的：

export interface IListState {

listItems：IList []; }

导出默认类AgreementDatabase扩展了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方法的链接时，列表将被毫无问题地分组。当将列表分组后，当我单击调用getEnded或getPassed方法的链接时，就会出现问题。在这种情况下，在过滤结果之前不会重新加载列表。我得到的是带有过滤结果的分组列表。我张贴了一些图片以更好地理解。

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

最好的问候美国

Answer 1

我认为我找到了真正的问题，与国家无关。在render方法中，我使用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}
          />)
}

}

然后我使用state来查看是否应该显示的过滤器或分组列表

感谢您的宝贵时间，这使我思考开箱即用

最好的问候美国

Answer 2

因此，我当时想的是将状态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>;
}

这实际上是一种简化，但是我想您可以理解我的想法。
我不知道您知道某个项目是否通过和/或结束，我只是假设每个项目中都有一个status属性。

有帮助吗？可以在您的应用中实现吗？

编辑：请注意，我没有“重置”状态。这没有用，因为您有两种选择可以做到这一点：

再次执行提取；
将原始数据保留在该类的一个属性中，但随后您将在原始数据和过滤后的数据中重复一些项目；

Answer 3

我认为我找到了真正的问题，与国家无关。在render方法中，我使用ListView来呈现列表，在此组件中，我使用的是groupByFields属性，该属性自动将结果分组：

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

组来自groupByFields状态。

我真正需要做的是找到一种方法，当我想要过滤时，可以停用groupByfield属性，否则无论如何过滤或操作状态，结果都将被分组。

您知道一种方法吗？或仅当 groupHandler方法被调用？

最好的问候美国

在React中，如何保存原始内容？

3 个答案: