Warum erhalte ich die Meldung „Zu viele erneute Renderings. React begrenzt die Anzahl der Renderings“? Wo ist meine Endlosschleife?

Question

Mein Code unten wird ausgeführt, aber ich erhalte die Fehlermeldung „Zu viele erneute Renderings“. Ich weiß nicht, warum. Wenn ich den Doppelschalter herausnehme und ihn auf eine Einheit (wie den Preis) stütze, funktioniert es. Ich kann jedoch nicht herausfinden, wo mein Code die Endlosschleife verursacht. Das Internet sagt, dass ich useState möglicherweise falsch verwende. Jede Hilfe wird geschätzt. Ich bin ein Neuling, also haben Sie bitte Verständnis dafür, dass ich möglicherweise etwas Dummes getan habe! Egal, Lernen ist toll! Danke.

import React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import TableSortLabel from "@mui/material/TableSortLabel";
import { useState } from "react";


function createData(number, item, qty, price) {
  return { number, item, qty, price };
}

const rows = [
  createData(1, "Apple", 5, 3),
  createData(2, "Orange", 2, 2),
  createData(3, "Grapes", 3, 1),
  createData(4, "Tomato", 2, 1.6),
  createData(5, "Mango", 1.5, 4)
];

export default function SortedTable() {
  const [rowData, setRowData] = useState(rows);
  const [orderDirection, setOrderDirection] = useState("asc");
  const [orderUnit, setOrderUnit] = useState("number");

  const sortArray = (arr, orderBy, orderUn) => {
    switch (orderUn) {
      case "number": 
      default:
        switch (orderBy) {
          case "asc":
          default:
            return arr.sort((a, b) =>
              a.number > b.number ? 1 : b.number > a.number ? -1 : 0
            );
          case "desc":
            return arr.sort((a, b) =>
              a.number > b.number ? 1 : b.number > a.number ? -1 : 0
            );
        }
      case "item": 
      switch (orderBy) {
        case "asc":
        default:
          return arr.sort((a, b) =>
            a.item > b.item ? 1 : b.item > a.item ? -1 : 0
          );
        case "desc":
          return arr.sort((a, b) =>
            a.item < b.item ? 1 : b.item < a.item ? -1 : 0
          );
      }
      case "qty": 
      switch (orderBy) {
        case "asc":
        default:
          return arr.sort((a, b) =>
            a.qty > b.qty ? 1 : b.qty > a.qty ? -1 : 0
          );
        case "desc":
          return arr.sort((a, b) =>
            a.qty < b.qty ? 1 : b.qty < a.qty ? -1 : 0
          );
      }
      case "price": 
      switch (orderBy) {
        case "asc":
        default:
          return arr.sort((a, b) =>
            a.price > b.price ? 1 : b.price > a.price ? -1 : 0
          );
        case "desc":
          return arr.sort((a, b) =>
            a.price < b.price ? 1 : b.price < a.price ? -1 : 0
          );
      }
    }
  };
 


  const handleSortRequest = (unit) => {
    setOrderUnit(orderUnit === unit); 
    setRowData(sortArray(rows, orderDirection, orderUnit));
    setOrderDirection(orderDirection === "asc" ? "desc" : "asc");
  };

  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table" >
        <TableHead>
          <TableRow>
            <TableCell align="center" onClick={handleSortRequest("number")}><TableSortLabel active={true} direction={orderDirection}>
              S.No
            </TableSortLabel></TableCell>

            <TableCell align="center" onClick={handleSortRequest("item")}><TableSortLabel active={true} direction={orderDirection}>
              Item
            </TableSortLabel></TableCell>

            <TableCell align="center" onClick={handleSortRequest("qty")}><TableSortLabel active={true} direction={orderDirection}>
              Quantity&nbsp;(kg)
            </TableSortLabel></TableCell>

            <TableCell align="center" onClick={handleSortRequest("price")}>
              <TableSortLabel active={true} direction={orderDirection}>
                Price&nbsp;($)
              </TableSortLabel>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rowData.map((row) => (
            <TableRow key={row.number}>
              <TableCell width="100" component="td" scope="row" align="center">
                {row.number}
              </TableCell>
              <TableCell align="center">{row.item}</TableCell>
              <TableCell align="center">{row.qty}</TableCell>
              <TableCell align="center">{row.price}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Ich versuche, jede Spalte basierend auf der angeklickten Spalte sortierbar zu machen. Bonusfrage: Warum stimmen meine Überschriften beim Rendern nicht mit den folgenden Spalten überein?

Answer 1

您需要传递函数引用，而不是直接调用函数。 这样，该函数将仅在事件发生时调用，而不是在组件渲染时立即调用。

onClick={() => handleSortRequest("item")}

我还重构了您的 sortArray 函数以使其可读。如果是错的。请不要打扰它。 ：D

const sortArray = useCallback((arr, orderBy, orderUn) => {
    const compare = (a, b, prop, order) => {
      if (order === "asc") {
        return a[prop] > b[prop] ? 1 : b[prop] > a[prop] ? -1 : 0;
      } else {
        return a[prop] < b[prop] ? 1 : b[prop] < a[prop] ? -1 : 0;
      }
    };

    switch (orderUn) {
      case "number":
      default:
        return arr.sort((a, b) => compare(a, b, "number", orderBy));

      case "item":
        return arr.sort((a, b) => compare(a, b, "item", orderBy));

      case "qty":
        return arr.sort((a, b) => compare(a, b, "qty", orderBy));

      case "price":
        return arr.sort((a, b) => compare(a, b, "price", orderBy));
    }
  }, []);

使用 useCallback 来防止在依赖关系未更改时不必要地重新渲染

const handleSortRequest = useCallback(
    (unit) => {
      setOrderUnit(orderUnit === unit);
      setRowData(sortArray(rows, orderDirection, orderUnit));
      setOrderDirection(orderDirection === "asc" ? "desc" : "asc");
    },
    [orderDirection, orderUnit, sortArray]
  );

希望这些对您有帮助。