Tengo el problema con el siguiente código:
function Test1(props) { const { ids = [] } = props; const [evenIds, setEvenIds] = useState<string[]>([]); useEffect(() => { const newEvenIds = ids.filter(id => id % 2 === 0); setEvenIds(newEvenIds); }, [ids]) return (<span>hello</span>) } El código anterior usa el gancho useEffect escuchar los cambios de accesorios. Cuando este componente se usa como <Test1 ids={[]}/> , todo parece estar bien. Sin embargo, si se usa como <Test1 /> sin pasar accesorios, la consola informa repetidamente que se maximum update depth exceeded del error y el navegador finalmente se bloquea.
Supongo que la variable ids con valor inicial undefined está asignada [] , lo que hace que useEffect se ejecute. Pero, ¿cómo conduce eso al error repetido?
Cuando se pasan ids como prop, la única vez que se cambiará la referencia de la variable local ids será cuando cambie la prop.
Cuando no se pasa como accesorio, la asignación predeterminada, ya que se ejecuta dentro de la función, cada vez que se ejecuta la función, produce una nueva matriz vacía cada vez. Entonces, si el componente de función se actualiza una vez , intentará continuar actualizándose para siempre porque la referencia de matriz vacía predeterminada sigue cambiando.
Una forma de solucionar esto sería colocar la matriz vacía fuera del componente. (Solo asegúrate de no mutar, como siempre en React)
const emptyArr = []; function Test1(props) { const { ids = emptyArr } = props; const [evenIds, setEvenIds] = useState<string[]>([]); useEffect(() => { const newEvenIds = ids.filter(id => id % 2 === 0); setEvenIds(newEvenIds); }, [ids]) return (<span>hello</span>) } Sin embargo, el estado no debe duplicarse en más de un lugar. useMemo sería más apropiado que un estado separado y useEffect IMO.
const emptyArr = []; function Test1(props) { const { ids = emptyArr } = props; const evenIds = useMemo(() => ids.filter(id => id % 2 === 0), [ids]); return (<span>hello</span>) }No es por los accesorios destruidos. Está utilizando una matriz como el valor.
const { ids = [] } = props;Si desea usar el valor como una matriz, intente usarlo de esta manera en su useEffect;
[JSON.stringfy(ids)]El useEffect verifica el valor dentro de la variable y prueba si el valor cambia o no. Pero necesitas poner un valor primario dentro. Si lo desea, puede usar ids[0] para obtener un valor si esta matriz tiene valores primarios en todas las posiciones.