javascript - 反应 onClick 需要额外的点击来改变状态

Question

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

应用程序.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

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

表格组件中的 onClick 函数是使用 setState 函数的地方。并且需要额外的点击来改变状态。先感谢您！！

Answer 1

尝试将此调用移至useEffect：

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