No estoy seguro de lo que estoy haciendo mal... Si cambio el estado a un contador, funciona, pero necesito que sea una matriz de objetos para almacenar diferentes valores para cada div. No estoy seguro de por qué el dom nunca se actualiza.
import "./styles.css"; import { useState } from "react"; // The parent component const App = () => { const [textBoxDivs, setTextBoxDivs] = useState([]); const addNewTextBox = () => { const textboxes = textBoxDivs; const numOfTextBoxDivs = textBoxDivs.length; const newTextBox = { id: `div${numOfTextBoxDivs + 1}` }; textboxes.push(newTextBox); setTextBoxDivs(textboxes); console.log(textboxes, "boxes"); }; return ( <div> <button onClick={() => addNewTextBox()}>Click me</button> {textBoxDivs.length > 0 ? textBoxDivs.map((item, index) => ( <div key={index} id={item.id}> text </div> )) : null} </div> ); }; export default App;códigoSandbox: https://codesandbox.io/s/friendly-water-wf4f5?file=/src/App.js:0-749
Porque está intentando mutar el estado existente al enviar un nuevo elemento a textBoxDivs , en lugar de proporcionar un nuevo estado, rompiendo una de las reglas fundamentales de React.
En lugar de push a su matriz textBoxDivs , proporcione una nueva copia de su estado, con el nuevo elemento insertado:
import "./styles.css"; import { useState } from "react"; // The parent component const App = () => { const [textBoxDivs, setTextBoxDivs] = useState([]); const addNewTextBox = () => { const numOfTextBoxDivs = textBoxDivs.length; const newTextBox = { id: `div${numOfTextBoxDivs + 1}` }; setTextBoxDivs((textBoxDivs) => ([ ...textBoxDivs, newTextBox ])); }; return ( <div> <button onClick={() => addNewTextBox()}>Click me</button> {textBoxDivs.length} {textBoxDivs.length > 0 ? textBoxDivs.map((item, index) => ( <div key={index} id={item.id}> text </div> )) : null} </div> ); }; export default App;Lectura:
Debo señalar que no hay nada intrínsecamente malo en usar push en este escenario, el problema es que está presionando al estado existente. Podrías hacer con la misma facilidad
// Still creating a new state from the current state const newTxtBoxDivs = [...textBoxDivs]; newTxtBoxDivs.push(newTextBox); setTextBoxDivs(newTxtBoxDivs); Para el mismo efecto. La conclusión clave es que newTxtBoxDivs no se refiere al mismo objeto que textBoxDivs , se refiere a una copia del mismo.