错误：重新渲染过多。 React 限制渲染次数

Question

我正在尝试过滤数组，但是当尝试使用 useState 获取结果时，会出现此错误。我已经尝试将它放在回调函数中，但它不起作用......

重要代码片段：

const pedidosFiltro = pedidos
    .filter((p) => p.cliente === chosenCliente)
    .map((a) => a.origem);

  setOrigensFilter(pedidosFiltro);

完整代码：

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";

// !!! FAZER OS FILTROS PARA TODOS OS ELEMENTOS DO PEDIDO !!!

function App() {
  // Constante com um array e todos os pedidos:
  const [pedidos, setPedidos] = useState([]);

  // Constantes escolhidas pelo usuário
  const [chosenOrigem, setChosenOrigem] = useState("");
  const [chosenUnidade, setChosenUnidade] = useState("");
  const [chosenCliente, setChosenCliente] = useState("");

  // Constantes criadas para fazer consultas coluna por coluna
  const [origens, setOrigens] = useState([]);
  const [unidades, setUnidades] = useState([]);
  const [clientes, setClientes] = useState([]);

  // Constantes para armazenar conteúdos vindos do pedidosFilter
  const [origensFilter, setOrigensFilter] = useState([]);

  var finalOrigens = origens.map((obj) => {
    return obj.origem;
  });

  var finalUnidades = unidades.map((obj) => {
    return obj.unidade;
  });

  var finalClientes = clientes.map((obj) => {
    return obj.cliente;
  });

  // Getting rid of duplicate elements in a array:
  var uniqueOrigens = [...new Set(finalOrigens)];
  var uniqueUnidades = [...new Set(finalUnidades)];
  var uniqueClientes = [...new Set(finalClientes)];

  const pedidosFiltro = pedidos
    .filter((p) => p.cliente === chosenCliente)
    .map((a) => a.origem);

  setOrigensFilter(pedidosFiltro);

  useEffect(() => {
    // Pegando coluna por coluna dos pedidos:
    const getOrigens = () => {
      axios.get("http://localhost:5000/api/get/origens").then((response) => {
        setOrigens(response.data);
      });
    };

    const getUnidade = () => {
      axios.get("http://localhost:5000/api/get/unidades").then((response) => {
        setUnidades(response.data);
      });
    };

    const getCliente = () => {
      axios.get("http://localhost:5000/api/get/clientes").then((response) => {
        setClientes(response.data);
      });
    };

    // Pegando todos os pedidos aclopados:
    const getPedidos = () => {
      axios.get("http://localhost:5000/api/get/pedidos").then((response) => {
        setPedidos(response.data);
      });
    };

    // Chamando função de todos os pedidos:
    getPedidos();

    // Chamando funções para pegar coluna por coluna nos pedidos:
    getOrigens();
    getUnidade();
    getCliente();
  }, []);

  return (
    <div className="App">
      <select
        value={chosenOrigem}
        onChange={(e) => {
          setChosenOrigem(e.target.value);
          console.log(chosenOrigem);
        }}
      >
        {uniqueOrigens.map((origem, index) => {
          return <option key={index}>{origem}</option>;
        })}
      </select>

      <select
        value={chosenUnidade}
        onChange={(e) => {
          setChosenUnidade(e.target.value);
          console.log(chosenUnidade);
        }}
      >
        {uniqueUnidades.map((unidade, index) => {
          return <option key={index}>{unidade}</option>;
        })}
      </select>

      <select
        value={chosenCliente}
        onChange={(e) => {
          setChosenCliente(e.target.value);
          console.log(chosenCliente);
        }}
      >
        {uniqueClientes.map((cliente, index) => {
          return <option key={index}>{cliente}</option>;
        })}
      </select>

      <h4 className="resultados">Resultados:</h4>
      {pedidos
        .filter(
          (pedido) =>
            pedido.origem === chosenOrigem &&
            pedido.unidade === chosenUnidade &&
            pedido.cliente === chosenCliente
        )
        .map((filteredPedido) => (
          <div className="dataBox">
            <h4>Origem: {filteredPedido.origem}</h4>
            <h4>Pedido: {filteredPedido.pedido}</h4>
            <h4>Unidade Carga: {filteredPedido.unidade_carga}</h4>
            <h4>Unidade: {filteredPedido.unidade}</h4>
            <h4>Cliente: {filteredPedido.cliente}</h4>
            <h4>Quantidade Pedida: {filteredPedido.quantidade_pedido}</h4>
            <h4>Data de Entrega: {filteredPedido.data_entrega}</h4>
            <h4>Data de Embarque: {filteredPedido.data_embarque}</h4>
            <h4>Incoterm: {filteredPedido.incoterm}</h4>
            <h4>Peso: {filteredPedido.peso}</h4>
            <h4>Tipo Unidade Carga: {filteredPedido.tipo_unidade_carga}</h4>
            <h4>Largura UC: {filteredPedido.largura_uc}</h4>
            <h4>Comprimento UC: {filteredPedido.comprimento_uc}</h4>
            <h4>Altura UC: {filteredPedido.altura_uc}</h4>
            <h4>Produto: {filteredPedido.produto}</h4>
          </div>
        ))}
    </div>
  );
}

export default App;

Answer 1

您不应该像这样将setOrigensFilter 留在应用程序函数中，尝试将其包装在自己的函数中，如下所示：

function setOrigensFilterHandler () {
  const pedidosFiltro = pedidos
    .filter((p) => p.cliente === chosenCliente)
    .map((a) => a.origem);

  setOrigensFilter(pedidosFiltro);
}

并在需要时执行。

说明 setOrigensFilter 设置导致重新渲染App() 函数的应用程序状态，但是重新渲染App() 函数将调用setOrigensFilter，这反过来又会触发另一个重新渲染。在这个循环中不断循环，所以最后 React 会给你这个 Too many rerenders 错误。