, Usando accesorios, pude pasar el estado hacia arriba desde mi componente secundario a su padre, pero un cambio en el estado no provoca una nueva representación de la página.
import React, { useState } from "react"; export default function App() { const AddToList = (item) => { setText([...text, item]); }; const removeFromList = (item) => { const index = text.indexOf(item); setText(text.splice(index, 1)); }; const [text, setText] = React.useState(["default", "default1", "default2"]); return ( <div className="App"> <div> <button onClick={() => { AddToList("hello"); }} > Add </button> </div> {text.map((item) => { return <ChildComponent text={item} removeText={removeFromList} />; })} </div> ); } const ChildComponent = ({ text, removeText }) => { return ( <div> <p>{text}</p> <button onClick={() => { removeText(text); }} > Remove </button> </div> ); };En el fragmento, cada vez que se llama a AddToList, se crea un nuevo componente secundario y la página se vuelve a representar reflejando eso. Sin embargo, cuando llamo a removeFromList en el componente secundario, no sucede nada. La página permanece igual, aunque pensé que esto reduciría la cantidad de childComponents presentes en la página. Este es el problema al que me enfrento.
A la luz de sus ediciones, el problema es que está mutando y pasando la matriz original en estado nuevamente a sí misma: React ve que está recibiendo una referencia al mismo objeto y no se actualiza. En su lugar, distribuya el text en una nueva matriz duplicada, empalme la matriz duplicada y pásela a setText :
const removeFromList = (item) => { const index = text.indexOf(item); const dupeArray = [...text]; dupeArray.splice(index, 1); setText(dupeArray); };Puedes ver esto trabajando en este violín
La razón por la que React tiene cosas como ganchos de estado es que los aprovecha para conectarse y activar el ciclo de vida de React. Su problema en realidad no tiene nada que ver con un niño que intenta actualizar el estado de un padre. Es que mientras su función AddToList está aprovechando correctamente la gestión de estado de React:
const AddToList = (item) => { setText([...text, item]); }; Su función removeFromList no utiliza ningún enlace de estado:
const removeFromList = (item) => { const index = text.indexOf(item); text.splice(index, 1); // you never actually setText... };... así que React no tiene idea de que el estado se haya actualizado. Deberías reescribirlo como algo como:
const removeFromList = (item) => { const index = text.indexOf(item); const newList = text.splice(index, 1); setText(newList); }; (Además, si vale la pena, está siendo un poco flojo con los estilos: su AddToList está en mayúsculas usando PascalCase mientras que removeFromCase está usando camelCase. Por lo general, en JS reservamos PascalCase para class es, y en React también podemos aprovecharlo. para componentes y servicios; generalmente no lo usaríamos para un método o una variable).