Así que soy nuevo en trabajar en Electron y React. Quería implementar más funciones, pero me encontré con un problema en el que, cuando paso la función c a un nuevo elemento Tarjeta, parece pasar el gancho en la función c en el momento de la creación.
Tal que: cuando se hace clic en el botón + 3 veces, se generarían 3 tarjetas como se esperaba, llamémoslas 0, 1 y 2. Sin embargo, cuando se hace clic en su botón de registro para registrar en la consola, las tarjetas se enganchan, al hacer clic en el botón de registro de 0, la consola registra:
{}Al hacer clic en el botón de registro de 1, la consola registra:
{0: {react element of 0}}al hacer clic en los registros de la consola del botón de registro de 2:
{0: {react element of 0}, 1: {react element of 1}}Sin embargo, hacer clic en el botón - que he manipulado para solucionar este problema en este momento en App.js produce:
{0: {react element of 0}, 1: {react element of 1}, 2: {react element of 2}}¿Me equivoco al suponer que hacer clic en cada botón de registro debería haber registrado en la consola lo que registró el botón - en la consola App.js? ¿En lugar de cómo se veía el gancho en el momento de la creación de los elementos de la tarjeta? ¿Cómo haría para solucionar este problema?
Nota: la razón por la que uso un Objeto para almacenar los elementos de React en lugar de un Array es porque eventualmente me gustaría agregar un botón de eliminación para eliminar tarjetas individuales. ¿Hay una mejor manera de hacer lo que estoy haciendo?
Aplicación.js
import './App.css'; import Cards from './Cards/Cards' import { useState } from 'react'; let KEY = 0 export default function App() { const [cards, setCards] = useState({}) const c = () => { console.log(cards) } const make = () =>{ const a = <Cards log={c} anID={KEY}/> const b = {...cards} b[KEY] = a KEY += 1 setCards(b) } return ( <div> <div className="time-container"> {Object.values(cards)} </div> <button className="add-button" onClick={() => make()} >+</button> <button className="" onClick={() => console.log(cards)} >-</button> </div> );Tarjeta.js
import React from 'react' import './Cards.css' export default function Cards({ log, anID }) { return <div className="card-container"> <div> <button className="card-buttons-red" onClick={()=> log(anID)}>Log</button> <button className="card-buttons">Edit</button> </div> </div> }Una vez que haya creado el elemento <Cards log={c} anID={KEY} /> jsx usando la función make() , no se volverá a cambiar. La firma de función de c no se cambiará, en función del cambio de estado de las cards cuando se inserta en un componente <Cards/> particular como accesorio. Eso simplemente significa que los parámetros de la función o su salida no se cambiarán una vez que haya creado el componente <Cards/> .
Es por eso que con el botón 1st Log solo registra {} y el botón 2nd Log registra {0: {react element of 0}} .
Aquí puede observar que la firma de función de la función c que pasó a un componente secundario no se modificó una vez después de su creación.
Para explicarlo de forma sencilla.
Antes, al ejecutar la función make() por primera vez, el objeto de las cards es {} . Entonces puede entender cuando ejecuta la función make() primero, la función c pasada será la siguiente.
const c = () => { console.log({}) } Esto no se cambiará en función del cambio de cards .
Cuando ejecute make() por segunda vez, la función c pasada será la siguiente.
const c = () => { console.log({0: {react element of 0}}) } No creo que realmente necesite registrar objetos de cards dentro del componente <Cards/> . Simplemente regístrelo dentro del componente principal cada vez que cambie el estado de las cards usando un useEffect de la siguiente manera.
let KEY = 0; export default function App() { const [cards, setCards] = useState({}); const c = () => { console.log(cards); }; const make = () => { const a = <Cards log={c} anID={KEY} />; const b = { ...cards }; b[KEY] = a; KEY += 1; setCards(b); }; useEffect(() => { console.log("cards: ", cards); }, [cards]); return ( <div> <div className="time-container">{Object.values(cards)}</div> <button className="add-button" onClick={() => make()}> + </button> <button className="" onClick={() => console.log(cards)}> - </button> </div> ); }La forma en que funciona React es que vuelve a ejecutar su función Componente cada vez que se vuelve a renderizar (o incluso con más frecuencia).
Luego se vuelve a crear cualquier cosa en el cuerpo de la función Componente, con la excepción de los ganchos que pueden retener alguna información previa.
En su caso, eso significa que su función c y la variable de estado de sus cards son referencias diferentes cada vez.
Luego, como lo implica la respuesta de @ KavinduVIndika, esencialmente incrusta estas referencias al crear sus make secundarios de Tarjetas en su función de creación y almacenarlos en el estado de sus cards . En el siguiente renderizado, se crean nuevas referencias, lo que lleva a su síntoma.
Una solución inmediata podría ser intentar hacer referencia a algo que "persiste" a través de las representaciones pero sin estar incrustado. Ese es el caso de uso del gancho useRef .
function App() { const [cards, setCards] = useState({}) const c = useRef() c.current = () => { console.log(cards) } const make = () =>{ const a = <Cards log={c} anID={KEY}/> const b = {...cards} b[KEY] = a KEY += 1 setCards(b) } return <>(template)</> } // in Cards, call c.current <button className="card-buttons-red" onClick={()=> log.current(anID)}>Log</button> Pero como implica el comentario de @KavinduVIndika, solo hay una forma React más común para evitar este problema por completo. Me parece que puede deberse a su intento de optimización prematura , para anticipar el uso de su temporizador, pero sin saber que React ya cubre el cuello de botella de rendimiento más penalizante, es decir, el repintado del navegador, gracias a su DOM virtual. Sí, es posible que se vuelva a ejecutar el componente de Tarjetas secundarias (pero conserve sus estados con el uso adecuado de la propiedad especial de ref ), pero en la gran mayoría de los casos verá poco impacto en el rendimiento.
function App() { const [cards, setCards] = useState({}) const c = () => { console.log(cards) } const make = () =>{ const a = KEY // use plain data, do not store JSX const b = {...cards} b[KEY] = a KEY += 1 setCards(b) } return (<> {Object.values(cards).map(cardData => // by building the Cards within the App at render time, // it now uses the most up-to-date reference of your c function, // hence avoids past reference issue. // Performance-wise, React detects that the actual DOM // does not need visual update, hence no repaint. <Cards log={c} anID={cardData} ref={cardData} /> )} </>) }