javascript - 如何解决使用 useState 并获取 "Too many re-renders. React...."的函数调用

Question

上下文:
我正在使用 React hooks。我正在做的是onClick={sortTable(valuePassed)}并检查状态值并使用 setSortedKey() 更改它和setSortedOrder()


错误:

"Too many re-renders. React limits the number of renders to prevent an infinite loop."

据我了解useState和setMyState每次调用时都会重新渲染组件。在这种特殊情况下我的问题是我知道我应该使用 useEffect()但无法理解如何使用这种类型的函数来做到这一点。


我的组件:
该组件如下所示。

function BaseTable(props) {
  // fake data
  const headers = []

  // state
  const [sortedKey, setSortedKey] = useState('')
  const [sortedOrder, setSortedOrder] = useState('')

  // methods
  const sortTable = (sortKey) => {
    setSortedOrder(sortedKey !== sortKey ? '' : sortedOrder)
    setSortedKey(sortedKey !== sortKey ? '' : sortedKey)

    setSortedOrder(sortedOrder === 'asc' ? 'desc' : 'asc')
  }

  return (
    <table className={ classnames('table', { 'table--layout-fixed': props.fixedLayout }) }>
    <thead>
      <tr className="table__header-row">
        {headers.map((header, index) =>
          <th key={ index } className="table__header-cell">
            <button onClick={ sortTable(header.sortKey) }>
                { header.displayName }

              <div className="table__header-sort-actions">
                <ArrowDownSorting className="table__header-sort" />
                <ArrowDownSorting className="table__header-sort" />
              </div>
            </button>
          </th>
        )}
      </tr>
    </thead>
    <tbody>
      {props.tableData.map((row) =>
        <tr className="table__body-row" key={row.name + row.i}>
          <TableCellBasic cellValue={row._id} />
          <TableCellBasic cellValue={row.prop1} />
          <TableCellBasic cellValue={row.prop2} />
          <TableCellBasic cellValue={row.prop3} />
        </tr>
      )}
    </tbody>
  </table>
  )
}

BaseTable.propTypes = {
  header: PropTypes.array,
  tableData: PropTypes.array,
  tableName: PropTypes.string,
  fixedLayout: PropTypes.bool,
  defaultSortedKey: PropTypes.string
}

export default BaseTable

Answer 1

此时，您将对 sortTable 的调用值分配给处理程序。

<button onClick={ sortTable(header.sortKey) }>

您需要分配一个函数:

<button onClick={() => sortTable(header.sortKey)}>