tengo este codigo:
function Parent(props) { const [items, setItems] = useState([]); const [itemArr, setItemArr] = useState([]); const [reRender, setReRender] = useState(false); useEffect(() => { let _items = items.slice(0).reverse().map((item, idx) => { return { type: { subject: item.type, type: "text" }, child: { subject: <Child data = {item} ></Child>, type: "inline" }, } }); setItemArr(_items); }, [reRender]) function newItem(info) { let [date, time] = getDate(); let tmp = items; tmp.push({ id: items.length, type: info.type, date: date, time: time }); setItems(tmp); setReRender(!reRender); } return ( <MyTable items = {itemArr} ></MyTable> ) } y mi componente Child :
export default function ScanTimer(props) { console.log(props.data); useEffect(() => { console.log(props.data); }, []); return( <div></div> ) } cuando ejecuto mi aplicación y agrego dos elementos a la tabla, primero console.log en el componente secundario (el que está fuera de useEffect ) muestra los datos correctos. pero el último (en useEffect ) muestra datos incorrectos (los datos que son para el primer elemento insertado en la tabla).
también sucede cuando inicio un estado de esta manera:
const [data, setData] = useState(props.data);en el elemento Niño.
No sé por qué sucede. ¿¿Puede alguien ayudarme??
el primer componente secundario de console.log (el que está fuera de useEffect) muestra los datos correctos
Eso se ejecuta cada vez que se renderiza el componente. Siempre mostrará los últimos datos.
pero el último (en useEffect) muestra datos incorrectos (los datos que son para el primer elemento insertado en la tabla
Se ejecuta cada vez que cambia la lista de dependencias.
Entonces se ejecuta en el primer renderizado (con el primer valor) porque las dependencias han cambiado de "no existía" a "existe".
Luego, en las representaciones posteriores, dado que no hay dependencias en la lista (pasó una matriz vacía), no han cambiado, por lo que no se ejecuta.
Ese es el punto de useEffect .
Si desea que se ejecute cuando cambien los datos, debe incluirlo en la lista de dependencias.
useEffect(() => { console.log(props.data); }, [props.data]);