Tengo un botón llamado sí en el componente secundario donde elimino un elemento de la lista de la matriz y el almacenamiento local usando props.id pasado desde el componente principal.
El problema es que el elemento se elimina de la matriz y del almacenamiento local, pero sigue visible en la pantalla hasta que presiono el botón Eliminar en otro elemento del componente principal.
cuando presiono el botón Eliminar en el componente principal, se abre una superposición. Cuando presiono el botón Sí en la superposición, quiero que el elemento de la lista se elimine de la pantalla de inmediato.
aquí está el código en el componente secundario.
import React, { useCallback, useState } from "react"; import styles from "./Delete.module.css"; function Delete(props) { // console.log(); const store = props.store; const [no, setNo] = useState(false); let [deleted, setDelted] = useState(store); console.log(deleted); console.log("Length :" + store.length); const noBtnHandler = () => { console.log("clicked"); setNo(!no); props.setDel(false); }; const yesBtnHandler = () => { console.log("Dlete.js :" + props.id); const filteredStore = deleted.filter((task) => task.id !== props.id); setDelted([...filteredStore]); localStorage.removeItem(props.id); // console.log(deleted); setNo(!no); }; return ( <div className={`${no === false ? styles.del : styles.delOn}`}> <section> <div> <h3>Are you Sure ?</h3> </div> <div> <button type="button" onClick={yesBtnHandler}> {" "} Yes{" "} </button> <button type="button" onClick={noBtnHandler}> {" "} No{" "} </button> </div> </section> </div> ); } export default Delete;Prueba a eliminar el final...
const yesBtnHandler = () => { console.log("Dlete.js :" + props.id); const filteredStore = deleted.filter((task) => task.id !== props.id); setDelted([filteredStore]); //or setDelted(filteredStore); localStorage.removeItem(props.id); // console.log(deleted); setNo(!no); };Está pasando la tienda del componente principal al componente Delete y configurando un nuevo estado aquí 'eliminado'. por lo que solo está llamando a setDeleted en el componente Delete que no afectará al componente principal.
La implementación correcta es tener el estado de la tienda en el componente principal si aún no lo tiene. Seguirá siendo el mismo que el estado deleted , pero posiblemente con un nombre mejor. Di const [store, setStore] = useState([])
Defina una función para filtrar un registro en particular tal como lo hizo en el controlador yesBtnHandler . pero esta función se definirá en el componente principal. decir como ejemplo
const removeRecord = (id) => { const filteredStore = store.filter((task) => task.id !== id); localStorage.removeItem(id); setStore(filteredStore); } Ahora debe pasar la función a al componente de Delete del padre en lugar de pasar toda la tienda. Me gusta
<Delete removeFunc= {() => { removeRecord(id) }} /> Después de pasar esta función, debe llamarla en su función yesBtnHandler . Me gusta
function Delete({removeFunc}) { ... const yesBtnHandler = () => { removeFunc(); setNo(!no); }; }Según tengo entendido, está tratando de cambiar el estado de un componente principal de un componente secundario. Si eso es lo que pretendes hacer, entonces puedes hacer lo siguiente:
function Delete(id) {...} dentro del componente principal en lugar del componente secundario.<ChildComponent array={array} onDelete={Delete} , donde matriz es la matriz en su componente principal y Delete es la función para eliminar un elemento de la matriz.function ChildComponent({array, Delete}) {...} ahora puede tener acceso a la matriz en su componente principal y modificarla como usted. me gusta Para activar el detector de eventos en el botón sí del componente secundario, haga lo siguiente: <button type="button" onClick={() => Delete(array.id)}> {" "} Yes{" "} </button>Espero que esto sea útil.