Question

我在页面上有两个表。第一个显示已保存查询的列表。用户可以单击任何已保存的查询来运行查询结果，这些结果将显示在第二个表中。我试图基于“ showQueryResults”的布尔状态显示/隐藏查询结果表。

当我从getTDProps onClick事件处理程序中将showQueryResults的State设置为false时，什么也没有发生。当我在完全相同的页面上的其他位置放置一个测试按钮时，查询结果表将被成功隐藏。

<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

此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
}

将始终呈现真实条件。这意味着您的表格将始终可见。

Answer 2

所以我已经使用异步/等待以以下方式使它工作：

      <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)
                      }
                }
              }
              });
          }
        },
    }}}
  />

仍然不确定为什么以前的方法不起作用，但是我会接受的！希望这对以后的人有所帮助。

在ReactTable getTdProps onClick事件中的setState之后，如何重新渲染另一个组件？

2 个答案: