Does the state of the component change for a fraction of a second and then return to the previous one?

Question

JavaScript

I have a component that receives and displays information about events (this.state.event) from the database (to a table). There are also some sort of filters. Filtering can be by event type and by participant.
When the button is clicked on onClick , handleShowClick() is called. In this function, I check: if the value of the event type is not null, I get from the database events with this type. If the event type value is null, I get all events.
After that, I check the value of the member (from the state). If the value is not null, I call a function that looks up what events this member is part of. The data from this.state.event is displayed in a table in another component.
I'm having trouble with a member. When I select one of the participants, the table shows the correct data for a fraction of a second. After that, it returns to the previous state this.state.event (without filter by participants).
How to fix it? I am setting the state for this.state.event in this component only

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 structure:

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

This.state.participantToEvent structure:

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

Answer 1

I would do a few things.
1. Reduced onHandleEventFetch and onHandleEventByTypeFetch methods because they are identical. It will be easier to debug
2. I looked at what the componentWillReceiveProps method returns
3. I brought the console to render, there is a suspicion that it is called several times. That is, you set the value, which happened again and a new value was set, which overwrote the received one.
PS To call the event key and at the same time save data to it, it’s somehow illogical. Better data, at least.