Estou criando uma tabela dinamica, no qual eu salvo as informacoes da linha no localStorage. Para renderizar a tabela, dou um getItem
no localStorage, um setRows
na um map na variavel rows
.
const [rows, setRows] = useState([]);
const rowsLS = JSON.parse(localStorage.getItem('rows')) || [];
useEffect(() => {
setRows(rowsLS);
}, [rowsLS]);
Desejo que quando o usuario adicionar uma nova row, o component rederize ela tambem, e isto esta funcionando, porem o console esta retornando o seguinte erro:
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.
Gostaria de saber o que esta causando esse erro e como evita-lo sem que mude o funcionamento
localStorage.getItem('rows')
diretamenteconst [rows, setRows] = useState(localStorage.getItem('rows') || []);
sem a necessidade de criar um constante no seu código e acho (não tem como saber exatamente) que ele reclama douseEffect
, sendo chamado varias vezes, no caso pode tirar ele dai por enquanto com a mudança acimalocalStorage
e joga na variável de estado do componente. Ou seja, todas as atualizações emrows
você precisa passar para olocalStorage
também para que ao entrar nesse componente também tenha sempre a ultima atualização. Então ai você pode usar ouseEffect(() => { localStorage.setItem('rows', JSON.stringify(rows)) }, [rows]);
onde ao mudar rows ele vai lá e adiciona a ultima atualização em localStorage? entendeu