Javascript 单击后作出反应，再单击一次以更改状态

我有一个函数，用于在App.js脚本中设置state。我已经将其作为道具传递给了FilteringTable.js组件，该组件在单击表行时调用此函数。 总是需要额外的点击来改变状态。 如何解决此问题？请帮忙

App.js

class App extends React.Component{

  state={
    data:[]
  }

  setStateData = rowData =>{
    this.setState({
      data:rowData
    })
  };
  render(){
    return (
      <Router>
      <div className='App'>
        <Header data={this.state.data}/>  
        <Switch>
          <Route path="/filtertable" render={(props)=> <FilteringTable{...props}setStateData={rowData => this.setStateData(rowData)}/>}/>
        </Switch>
        <Footer data={this.state.data}/> 
      </div>
      </Router>
    )
  }
}

export default App

类应用程序扩展了React.Component{
陈述={
数据：[]
}
setStateData=rowData=>{
这是我的国家({
数据：行数据
})
};
render（）{
返回(
this.setStateData（rowData）}/>
)
}
}
导出默认应用程序

FilteringTable.js

export const FilteringTable = (props) => {

  return (
    <>
    <div className="content">

      <table className="list-table" 
      {...getTableProps()}
      onClick={()=> {props.setStateData(selectedFlatRows);
        console.log("Clicked",selectedFlatRows)}}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>
                  {cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
      </div>
    </>
  )
}

export const FilteringTable=（道具）=>{
返回(
{props.setStateData（selectedFlatRows）；
console.log（“单击”，selectedFlatRows）}>
{headerGroups.map（headerGroups=>(
{headerGroup.headers.map（列=>(
{column.render（'Header'）}
))}
))}
{page.map（行=>{
准备工作（世界其他地区）
返回(
{row.cells.map（cell=>{
返回
{cell.render（'cell'）}
})}
)
})}
)
}

table组件中的onClick函数是使用setState函数的地方。它需要额外的点击来改变状态。

---

提前谢谢你

尝试将此调用移动到

useffect

：

 useEffect(()=> {props.setStateData(selectedFlatRows)},[selectedFlatRows])

---

那在点击时是如何工作的呢？虽然说实话，最初的问题并不是很清楚。根据我从用户之前的问题

selectedFlatRows

中了解到的情况，它是一个状态变量，在单击时会更新，因此回调获取以前的版本是有意义的。我可能认为你应该编辑你的帖子，只添加一个。如果我去掉你的组件，你的代码就可以正常工作了。