Как повторно визуализировать другой компонент после setState в событии ReactTable getTdProps onClick?

Question

У меня есть две таблицы реактивных таблиц на странице.Первый показывает список сохраненных запросов.Пользователь может щелкнуть любой из сохраненных запросов, чтобы запустить результаты запроса, которые отображаются во второй таблице.Я пытаюсь показать / скрыть таблицу результатов запроса на основе логического состояния "showQueryResults".

Когда я устанавливаю значение false для свойства showQueryResults в обработчике события onClick getTDProps, ничего не происходит.Когда я помещаю тестовую кнопку в другом месте на странице, которая делает то же самое, таблица результатов запроса успешно скрывается.

<ReactTable
    data={this.props.data}
    columns={columns}
    getTdProps={(state, rowInfo, column) => {
      return {
        onClick: () => {
          if (rowInfo){
            const row = rowInfo.row
            this.setState({selectedListId: row.id, showQueryResults: false},() => {
                if(column.id !== 'delete'){
                  if (row.search_type === 'dynamic'){
                    this.props.fetchQueryResults(row._original.search_criteria)
                      .then(this.setState({showQueryResults: true}))
                  } else {
                    this.props.fetchStaticResults(row.id)
                      .then(this.setState({showQueryResults: true}))
                  }
                }
              });
          }
        },
    }}}
/> 

В моей основной функции рендеринга я условно отображаю результаты запроса следующим образом:

{
 this.state.showQueryResults
 ? <ListResults
   queryResults = {this.props.queryResults}
   onModalToggle = {this.handleModalToggle.bind(this)}
   showSave = {false}
   />
   : null
 }

И, как я уже сказал, следующая кнопка тестирования успешно скрывает вышеуказанный элемент:

<button onClick={() => this.setState({showQueryResults: !this.state.showQueryResults})}>Toggle</button>

Есть мысли?

РЕДАКТИРОВАТЬ: Я также пыталсяследующее, чтобы убедиться, что fetchQueryResults завершается перед вторым setState (согласно комментариям), но это делает то же самое:

      <ReactTable
    data={this.props.data}
    columns={columns}
    getTdProps={(state, rowInfo, column) => {
      return {
        onClick: () => {
          if (rowInfo){

            const row = rowInfo.row

            const handleFetchQuery = (searchCriteria) => {
              return new Promise((resolve)=>{
                let response = this.props.fetchQueryResults(searchCriteria)
                if (response){
                  resolve('Success')
                }

              })
            }

            this.setState({selectedListId: row.id, showQueryResults: false},() => {
                if(column.id !== 'delete'){
                  if (row.search_type === 'dynamic'){
                    handleFetchQuery(row._original.search_criteria)
                      .then(() => {this.setState({showQueryResults: true})})
                  } else {
                    this.props.fetchStaticResults(row.id)
                      .then(this.setState({showQueryResults: true}))
                  }
                }
              });
          }
        },
    }}}

Answer 1

Итак, я заставил это работать следующим образом, используя async / await:

      <ReactTable
      data={this.props.data}
      columns={columns}
      getTdProps={(state, rowInfo, column) => {
          return {
            onClick: () => {
              if (rowInfo){

                const row = rowInfo.row

                const handleFetchQuery = async (searchCriteria) => {
                   await this.props.fetchQueryResults(searchCriteria)
                   .then(success => {this.setState({showQueryResults: !this.state.showQueryResults})
                })}

                const handleFetchStatic = async (listId) => {
                   await this.props.fetchStaticResults(listId)
                   .then(success => {this.setState({showQueryResults: !this.state.showQueryResults})
                })}

                this.setState({selectedListId: row.id, showQueryResults: false},() => {
                if(column.id !== 'delete'){
                  if (row.search_type === 'dynamic'){
                      try {
                        handleFetchQuery(row._original.search_criteria)
                      } catch (e) {
                        console.log(e)
                      }

                  } else {
                      try {
                        handleFetchStatic(row.id)
                      } catch (e) {
                        console.log(e)
                      }
                }
              }
              });
          }
        },
    }}}
  />

Все еще не уверен, почему это не работало предыдущими способами, но я возьму это!И, надеюсь, это поможет кому-то еще в будущем.

Answer 2

После этого setState

this.setState({selectedListId: row.id, showQueryResults: false}

вы вызываете еще один setState в обратном вызове

if(column.id !== 'delete'){
  if (row.search_type === 'dynamic'){
     this.props.fetchQueryResults(row._original.search_criteria)
       .then(this.setState({showQueryResults: true}))
  } else {
     this.props.fetchStaticResults(row.id)
      .then(this.setState({showQueryResults: true}))
  }
}

, поэтому showQueryResults равно true, тогда ваше состояние в

{
 this.state.showQueryResults
  ? <ListResults
    queryResults = {this.props.queryResults}
    onModalToggle = {this.handleModalToggle.bind(this)}
    showSave = {false}
   />
   : null
}

всегда будет отображать истинное условие.То есть ваша таблица всегда будет видна.