Question

我制作了一个组件，该组件在表中显示数据库中的信息。但是这些信息带有过滤器。可以按事件类型和参与者（id：整数类型）进行过滤。

单击按钮时，我会调用 handleShowClick（）。在此函数中，我检查：如果 type event 的值不为null，则从数据库 events 中获取此类型的值。如果 type event 的值为null，则得到所有 events 。

此后，我检查一个参与者值。如果value不为null，则调用函数，该函数搜索哪些事件包括该参与者。 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 is binding table
      if (itemP.parid === this.state.searchByParticipant) {
        this.state.event.map(itemEvent => {
          if (itemEvent.id === itemP.eventid) {
            list.push(itemEvent);
          }
        });
      }
    });
    console.log(list);  // here I see array with correct result
    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('nothing');
          } 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('nothing');
          } 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

this.setState(...this.state,{ event: list });

我认为这可以解决您的问题。因为您通过不复制先前状态来清除{event：list}以外的所有项目。

编辑：

您应该放

...this.state

到onHandleEventByeTypeFetch和onHandleEventFetch。没有它们，当您单击handleShowClick时，这两个功能之一将一直起作用，并且通过不复制先前的状态来清除状态中的searchByParticipant数据。

您之所以会在短时间内看到正确的数据，完全是因为状态的异步性。

如何使用this.state更新表中的值？

1 个答案: