1

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

enter image description here

and the source code is

const FilterSearch = () => {
  let filter = produtos

  if (params.searchType == "CategoriaProduto") {
    filter = produtos.filter(categoriaProduto => categoriaProduto.categoria == params.searchContent?.toString())
  }

  if (params.searchType == "Componente" && params.searchContent?.valueOf != undefined) {
    filter = produtos.filter(categoriaProduto => categoriaProduto.nome.includes(params.searchContent ? params.searchContent : ""))
  }

  return (
    filter.map(componente => {

      function getLowest() {
        if (componente.locaisVendas.length >= 1)
          return componente.locaisVendas.reduce((previous, current) => { return current.preco < previous.preco ? current : previous })
        else
          return null
      }

      const menorPreco = getLowest()

      return (
        <tr className="mt-2 my-3" key={componente.id}>
          <th className="py-3" >
            <img src="/among_us2.png" className="img-fluid" alt="Imagem responsiva" style={{ width: '100px', height: '100px', }} />
            &emsp;{componente.nome}
          </th>
          <th className="col-md-2">
            <label className="form-check-label fa fa-star text-warning" htmlFor="defaultCheck1"></label>
            <label className="form-check-label fa fa-star text-warning" htmlFor="defaultCheck1"></label>
            <label className="form-check-label fa fa-star text-warning" htmlFor="defaultCheck1"></label>
            <label className="form-check-label fa fa-star text-warning" htmlFor="defaultCheck1"></label>
            <label className="form-check-label fa fa-star text-muted" htmlFor="defaultCheck1"></label>
          </th>
          <th>R$ {menorPreco?.preco}</th>
          <th>{menorPreco?.vendedor}</th>
          <th>
            <Link to={`/Search/Product/${componente.id}`}>
              <button className="btn-details rounded p-2"><i className="fa-sharp fa-solid fa-plus mx-1"></i> Ver mais detalhes</button>
            </Link>
          </th>

        </tr>
      )
    }))
}

I am expecting, to resolve this infinite loop

Jerryh001
  • 766
  • 2
  • 11
user21933450
  • 11
  • 2
  • See this example for explanation and a solution https://stackoverflow.com/questions/57853288/react-warning-maximum-update-depth-exceeded – Stitt May 21 '23 at 02:33
  • I can't see any effect or state hooks in your code. Are you sure this is where the error is occurring? Need to narrow it down to the exact code causing the issue. – Jayce444 May 21 '23 at 02:36
  • const { slice, range } = useTable(FilterSearch(), page, 5); i using this for a pagination function, and need a array jsx.element – user21933450 May 21 '23 at 02:56
  • Based on the provided code snippet, it's not evident what could be causing the infinite loop. The issue might be occurring outside the `FilterSearch` component or in another part of your codebase – Anurag Tripathi May 21 '23 at 03:33

0 Answers0