reactjs - 如何使用 react-hooks 设置状态功能？

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

请帮我

标签： reactjsreact-hooks

Answer 1

这段代码。模态为空

  function onRowSelected(lol){    
     modal(lol)
  }

转换成这个

function onRowSelected(lol){    
     setModal(lol)
  }