Состояние компонента меняется на долю секунды и возвращается к предыдущему?

Question

[aznhautroalvyl]

У меня есть компонент, который получает и выводит информацию о событиях (this.state.event) из БД (в таблицу). Есть также что-то вроде фильтров. Фильтрация может быть по типу события и по участнику.
При нажатии кнопки на onClick вызывается handleShowClick(). В этой функции я проверяю: если значение типа события не равно null, я получаю из событий базы данных с этим типом. Если значение типа события равно null, я получаю все события.
После этого я проверяю значение участника (из состояния). Если значение не null, я вызываю функцию, в которой выполняется поиск, в какие события входит этот участник. Данные из this.state.event отображаются в таблице в другом компоненте.
У меня возникли проблемы с участником. Когда я выбираю одного из участников, таблица показывает верные данные на долю секунды. После этого происходит возврат в предыдущее состояние this.state.event (без фильтра по участникам).
Как это исправить? Я устанавливаю состояние для this.state.event только в этом компоненте

class TestPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      event: [],
      searchByType: null,
      searchByParticipant: null,
      participantToEvent: []
    };
    this.handleShowClick = this.handleShowClick.bind(this);
    this.onHandleEventByTypeFetch = this.onHandleEventByTypeFetch.bind(this);
    this.handleParticipantSearch = this.handleParticipantSearch.bind(this);
    this.onHandleEventFetch = this.onHandleEventFetch.bind(this);
  }

  handleShowClick() {  // onClick
      if (this.state.searchByType !== null) {
        this.onHandleEventByTypeFetch();  // select * from ... where type=...
      } else {
        this.onHandleEventFetch(); // select * from ...
      }
      if (this.state.searchByParticipant !== null) {
        this.handleParticipantSearch();
      }
  }

  handleParticipantSearch() {
    const list = [];

    this.state.participantToEvent.map(itemP => {  // participantToEvent связующая таблица
      if (itemP.parid === this.state.searchByParticipant) {
        this.state.event.map(itemEvent => {
          if (itemEvent.id === itemP.eventid) {
            list.push(itemEvent);
          }
        });
      }
    });
    console.log(list);  // здесь выводится массив с нужными данными
    this.setState({ event: list });
  }

  onHandleEventFetch() {
    fetch( ... , {
      method: 'GET'
    })
        .then((response) => {
          if (response.status >= 400) {
            throw new Error('Bad response from server');
          }
          return response.json();
        })
        .then(data => {
          if (data.length === 0) {
            alert('Не найдено');
          } else {
            this.setState({
              event: data
            });
          }
        });
  }

  onHandleEventByTypeFetch() {
    fetch( ... , {
      method: 'GET'
    })
        .then((response) => {
          if (response.status >= 400) {
            throw new Error('Bad response from server');
          }
          return response.json();
        })
        .then(data => {
          if (data.length === 0) {
            alert('Не найдено');
          } else {
            this.setState({
              event: data
            });
          }
        });
    ...
  }
}

Структура this.state.event:

[{id: 1, name: 'New event', participant: 5, type: 10}, ...]

Структура this.state.participantToEvent:

[{id: 1, idparticipant: 5, idevent: 1}, ...]

Answer 1

[Виталий Киренков]

Я бы сделал несколько вещей.
1. Свёл методы onHandleEventFetch и onHandleEventByTypeFetch, потому что они идентичны. Будет проще дебажить
2. Посмотрел, что возвращает метод componentWillReceiveProps
3. Вывел консоль в рендер, есть подозрение, что он вызывается несколько раз. То есть вы установили значение, что произошло ещё и установилось новое значение, которое перетёрло полученное.

P.S. называть ключ event и при этом сохранять в него данные, как то нелогично. Лучше уж data, хотя бы.

Comments

[aznhautroalvyl]

Методы onHandleEventFetch и onHandleEventByTypeFetch различны. Первый выполняет всю выборку (select *from ...), второй выполняет выборку по условию (select * from ... where ...).
Вывел консоль в рендер. this.state.event после выбора фильтра по участникам принимает нужное значение (которое должно отобразиться в компоненте таблицы), затем сразу же принимает значения без фильтра по участникам снова