// App.js import { useState } from "react"; import Child from "./Child"; export default function App() { const [value, setValue] = useState(0); const [isInvalid, setIsInvalid] = useState(false); const handleChange = (e) => setValue(e.currentTarget.value); const handleInvalid = (isValue) => setIsInvalid(isValue); console.log("parent", isInvalid); return ( <Child value={value} handleInvalid={handleInvalid} handleChange={handleChange} /> ); } //Child.js import { useEffect } from "react"; export default function Child({ value, handleInvalid, handleChange }) { console.log("child"); useEffect(() => { console.log("child effect"); handleInvalid(!(Number(value) >= Number(0) && Number(value) <= Number(24))); }, [value, handleInvalid]); return ( <input type="number" min={0} max={24} value={value} onChange={handleChange} /> ); }ejecutar => https://codesandbox.io/s/bumo-jasig-rendeoring-sunseo-isyu-forked-08gszy?from-embed
Cuando los componentes se renderizan por primera vez, funcionan como se esperaba. como esto:
parent false child child effectSin embargo, si cambio el valor de entrada, el resultado es así:
parent false child child effect parent falseComo puede ver, el componente principal se representa una vez más al final. ¿Cuál es el problema y cómo lo soluciono?
Actualice su función handleInvalid para llamar a la función setter solo si el valor realmente cambió:
const handleInvalid = (isValue) => isValue !== isInvalid && setIsInvalid(isValue); // or, lengthier // const handleInvalid = (isValue) => { if (isValue !== isInvalid) setIsInvalid(isValue) };Actualmente, cada cambio de entrada en el componente secundario activa dos setters en el principal:
handleChange , que llama a setValue(...) , activando la primera representación principalhandleInvalid (como parte de Child useEffect ), que siempre llama a setIsInvalid(...) . Ocurre mientras el componente principal aún no está 'finalizado' (esa es la diferencia con el renderizado inicial, cuando se llama a handleInvalid como parte del "montaje" secundario), por lo tanto, la función de renderizado para el padre se llama dos veces.Usted declara estados en Parent y se los pasa a Child a través de accesorios.
por lo que Parent volverá a renderizar cada vez que cambien sus estados
no tienes problema aqui