Штаты в React, как сохранить оригинал`?

Question

Я работаю в приложении SP Framework, которое читает, группирует и фильтрует данные из списка.

Для этого у меня в приложении есть метод, который вызывается из обработчика событий 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
  });
});

}

private getPassed (): void {

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

}

и инициализируется так:

export interface IListState {

listItems: IList []; }

экспорт по умолчанию класса AgreementDatabase расширяет React.Component { конструктор (props: 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

Я думаю, что нашел реальную проблему, и это не имеет никакого отношения к государству.В методе рендеринга я использую 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}
          />)
}

}

И я использую состояние, чтобы увидеть, нужно ли отображать фильтр или список группировки.

Спасибо за ваше время, это помогло меду немного подумать "из коробки"

С уважением, Американо

Answer 2

Я думаю, что нашел реальную проблему, и это не имеет никакого отношения к государству.В методе рендеринга я использую ListView для рендеринга списка, а в этом компоненте я использую свойство groupByFields, которое автоматически группирует результаты:

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

Группы происходят из состояния groupByFields.

Что мне действительно нужно сделать, так это найти способ деактивировать это свойство groupByfield, когда я хочу фильтровать, иначе не имеет значения, как я фильтрую или манипулирую состоянием, результат всегда будет группироваться.

Делаете ли вызнаете способ сделать это?или способ добавить это свойство только при вызове метода groupHandler?

С уважением, Американо

Answer 3

Итак, я подумал о том, чтобы сохранить свойство 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 свойство в каждом элементе.

Помогает ли это?Может ли это быть реализовано в вашем приложении?

РЕДАКТИРОВАТЬ: Обратите внимание, что я не "сбросить" состояние.Это бесполезно, поскольку у вас есть два варианта сделать это:

1. Повторное выполнение извлечения;

2. Сохранить исходные данные в свойствекласс, но тогда у вас будет несколько элементов, которые повторяются в исходных данных и в отфильтрованных данных;