useState Hook 触发选中的行消失（接下来使用react-bootstrap-table）

Question

我正在尝试对我当前的项目使用 react-bootstrap-table-next。在我的 App 组件中，我有 2 个子组件，一个 table 和一个表单中的一组按钮。默认情况下，按钮组是隐藏的，它们仅在 row/s 在 table 中被 select 显示。我正在使用 useState 挂钩来控制按钮的可见性。

我现在遇到的问题是，当我 select all/or table 中只有一行时，行 selection 不显示。看起来这与 useState 钩子有关。当我从 select 事件处理程序中删除 setState 代码时，我能够看到行 selection...

在我的代码下面：

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import BootstrapTable from 'react-bootstrap-table-next'
import { Button, Form } from 'react-bootstrap'

const App = () => {
  const [selectedRows, setSelectedRows] = useState([])
  const [isRowSelected, setIsRowSelected] = useState(false)

  const columns = [
    { dataField: '_id', text: '_id' },
    { dataField: 'name', text: 'name' },
  ]

  const dummyData = [
    {
      _id: 1,
      name: 'firstName',
    },
    {
      _id: 2,
      name: 'secondNameName',
    },
  ]

  const handleOnSelect = (row, isSelect) => {
    setSelectedRows([...selectedRows, row])
    setIsRowSelected(() => isSelect)
    return selectedRows
  }

  const handleOnSelectAll = (isSelect, rows) => {
    setIsRowSelected(isSelect)
    setSelectedRows(rows)
  }

  const selectRow = {
    mode: 'checkbox',
    clickToSelect: true,
    onSelectAll: handleOnSelectAll,
    onSelect: handleOnSelect,
  }

  return (
    <div>
      {isRowSelected && (
        <div>
          <br />
          <Form>
            <Form.Row className='align-items-center'>
              <Button variant='outline-danger'>Delete</Button>
              <Button variant='outline-primary'>Export</Button>
            </Form.Row>
          </Form>
        </div>
      )}

      <BootstrapTable
        keyField='_id'
        data={dummyData}
        columns={columns}
        selectRow={selectRow}
      />
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

const handleOnSelect = (row, isSelect) => {
  setSelectedRows([...selectedRows, row])
  setIsRowSelected(() => isSelect)
  return selectedRows
}

根据文档，此函数应该 return true/false。

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html#selectrowonselect-function

useState Hook 触发选中的行消失（接下来使用react-bootstrap-table）

useState Hook trigger selected rows to disappear (using react-bootstrap-table next)

reactjs

react-bootstrap-table