如何使用反应钩子为状态设置函数?

Question

我正在使用类组件，我想切换到函数组件(使用钩子(。当我使用类组件并单击网格的行时，将显示模态。当我将函数组件与钩子一起使用时，它显示错误"模态不是函数">

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