0
128
VistasPrevProps dando el mismo valor que los accesorios
Tengo un componente de scene que asigno a una matriz de objetos en el editor .
Y estoy pasando el objeto de scene como accesorios para cada escena, y quería obtener la scene anterior cuando presiono un button .
Pero cuando los comparo en la consola son iguales.
Usé ganchos useRef y useEffect para obtener prevProps
código para el editor :
const scene = { jsonObj: null, }; const [scenes, setScenes] = useState([scene]); useEffect(() => { }, []); const switchScene = (scene, prevScene) => { const JsonObj = canvas.setJsonObj(); console.log(JsonObj); const index = scenes.indexOf(scene); canvas.resetEditor(); const prevIndex = scenes.indexOf(prevScene); console.log(prevIndex, index); let cpScenes = [...scenes]; cpScenes[prevIndex].jsonObj = JSON.stringify(JsonObj); setScenes(cpScenes); cpScenes = [...scenes]; cpScenes[index].jsonObj = JsonObj; setScenes(cpScenes); canvas.loadJson(scene.JsonObj); console.log(scene); console.log(prevScene); }; return( <div> {scenes.map((scene, i) => ( <Scene key={i * Math.floor(Math.random() * 100)} addText="Scene" onDelete={removeScene} scene={scene} switchScene={(scene, prevScene) => { setUpdate(Math.floor(Math.random() * 100)); switchScene(scene, prevScene); }} /> ))} ); código de la scene :
import React, { useEffect, useRef, useState } from "react"; import _uniqueId from "lodash/uniqueId"; function Scene(props) { const id = useState(_uniqueId("sceneCmpn-")); const prevScene = useRef(props.scene); useEffect(() => { prevScene.current = props.scene; }, [props.Scene]); return ( <div key={id}> <button id={id} onClick={() => { props.switchScene(props.scene, prevScene.current); }} > Scene </button> <button onClick={() => props.onDelete(props.scene)} className="btn btn-danger m-2" > remove scene </button> </div> ); } export default Scene;1 Respuestas
Responde la pregunta0
Creo que la forma en que funciona el gancho usePrevious es devolviendo un valor obsoleto: useEffect solo se llama después de que el valor se actualiza dentro del gancho (creo).
Creo que el problema de tener onClick es el siguiente:
onClick={() => { props.switchScene(props.scene, prevScene.current); }} Es que useEffect actualizará prevScene antes de que se maneje el clic (por lo que devolverá el mismo valor para props.scene, prevScene.current ).
En lugar de integrar esa funcionalidad dentro de su componente, creo que podría hacer que funcione usando el gancho por separado.
Probé tu enfoque inicial con un ejemplo simple con un contador:
function Switcher(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); const onClick = () => { console.log(value, ref.current); }; return <button onClick={onClick}> LOG </button>; } export default Switcher; En este caso, hacer clic en el botón no funcionó como se esperaba, arrojó el mismo valor para value y valor previousValue :
Sin embargo, esto podría solucionarse separando el gancho:
function Switcher(value) { const prevValue = usePrev(value); const onClick = () => { console.log(value, prevValue); }; return <button onClick={onClick}> LOG </button>; } export default Switcher;Aquí está la salida de la consola:
Puedes encontrar la caja de arenaaquí