Estoy teniendo un componente en React. Su group de accesorios debe actualizarse cuando cambia el estado cloneMode . Para esto estoy usando el siguiente código:
Estructura:
const DraggableElement = ({ list, setList, cloneMode }) => { return ( <ReactSortable group={ cloneMode ? { name: "tasks_group", pull: "clone" } : "tasks_group" } key={cloneMode} list={list} setList={setList} animation={200} delay={1} className="task-child_drag" > {list.map((e) => { return <TaskItem key={e._id} task={e} />; })} </ReactSortable> ); };Padre:
const Tasks = () => { const [cloneMode, setCloneMode] = useState(false); return ( <div className="tasks"> <DraggableElement list={todo} setList={setTodo} cloneMode={cloneMode} /> <DraggableElement list={inProgress} setList={setInProgress} cloneMode={cloneMode} /> <DraggableElement list={done} setList={setDone} cloneMode={cloneMode} /> </div> ); }; Cuando ejecuto setCloneMode(true) , no afecta al componente. ¿Alguna idea sobre cómo puedo lograrlo?
Sin un codepen, cualquier información sobre por qué cree que el estado no se está actualizando, o más contexto, es difícil responder a su pregunta, pero aquí hay una lista de cosas que puede intentar:
data-test={cloneMode} .key de su componente DraggableElement . No necesitas una llave aquí. Si va a usar una clave en cualquier lugar de React, debe ser única. De la forma en que tiene esta configuración ahora, todas las claves serán verdaderas o falsas.true para uno de estos para asegurarme al 100% de que la utilería no funciona.Lo primero es que no está cambiando el estado (u olvidó escribirlo). Sin ella no podemos responder a su pregunta.
Este es el comportamiento predeterminado de React. Component should rerender once the value of props or state is changed .
Por lo tanto, descargue React Dev Tools , que es una extensión del navegador para Chrome o Edge que ayuda a ver/cambiar el valor de los accesorios y el estado de la ventana del desarrollador de Chrome en tiempo real. Con esto, obtendrá una mejor comprensión de su problema y comenzará a depurar desde allí.