如何使用react-hooks为状态设置函数？

Question

我使用的是类组件，我想切换到函数组件(使用钩子)。当我使用class组件并点击网格的行时，模式将会显示。当我使用带钩子的函数组件时，它显示错误"modal is not a function“

class MyGrid extends Component {
  state = {
    loading: false,
    rowData: [],
    columnDefs: [{headerName: 'Title', field: 'title'}, {headerName: 'Count', field: 'count'}],
    modal: null
  }

  //event click on row
  onRowSelected = (lol) => {    
     this.state.modal(lol)
  }

  render(){
    return (
        <>
          <Modal
            getOnOpen={callback => this.setState({modal: callback})}
          />
          <div style={{ height: '500px' }}>
            <Grid
              columnDefs={this.state.columnDefs}
              rowData={this.state.rowData}
              onGridReady={params => {
              params.api.sizeColumnsToFit()
              }}
              onRowSelected={this.onRowSelected}
            />
          </div>
       </>
    )
  }
}


export default MyGrid

和我的函数组件。这是错误的

function MyGrid(props) {
  const [modal, setModal] = useState(null)
  const [rowData, setRowData] = useState([])
  const columnDefs = [{headerName: 'Title', field: 'title'}, {headerName: 'Count', field: 'count'}]

  //event click on row
  function onRowSelected(lol){    
     modal(lol)
  }
    return (
        <>
          <Modal
            getOnOpen={callback => setModal(callback)}
          />
          <div style={{ height: '500px' }}>
            <Grid
              columnDefs={columnDefs}
              rowData={rowData}
              onGridReady={params => {
              params.api.sizeColumnsToFit()
              }}
              onRowSelected={onRowSelected}
            />
          </div>
       </>
    )
}


export default MyGrid

请帮帮我

Answer 1

此代码。模式为空

  function onRowSelected(lol){    
     modal(lol)
  }

转换为此格式

function onRowSelected(lol){    
     setModal(lol)
  }