Question

上下文：
我正在使用React钩子。我正在做的是onClick={sortTable(valuePassed)}并检查状态值，并用setSortedKey()和setSortedOrder()进行更改

错误：

“渲染次数过多。React限制了渲染次数，以防止无限循环。”

据我了解，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)}>

Answer 2

您应该将回调传递给onClick属性

onClick = {（）=> sortTable（header.sortKey）}

如何解决使用useState的函数调用并获得“太多重新渲染。反应...”

2 个答案: