Estoy tratando de enviar un nuevo valor a las matrices, pero las matrices no se actualizan con nuevos valores. Solo contiene un valor después de empujar. El valor de arr después de hacer clic en el botón solo muestra un valor, pero quiero que tenga múltiples valores. ¿Cuáles son las múltiples formas de poner valores en una variable arr o copiar el valor a otra variable?
function App() { const [value, setValue] = useState(null); let arr = []; function addToArr() { console.log(value); arr.push(value); console.log(arr); // it is only showing one value } return ( <div>react app <div> <textarea value={value} onChange={(e) => setValue(e.target.value)} > </textarea> <button onClick={addToArr}>Add</button> </div> </div> ); } export default App;Tu problema es que pones let arr = []; en la App del componente que se volverá a procesar cada vez que cambie el estado, su arr también se restablecerá.
Una posible solución podría ser mover su declaración arr fuera de la App del componente.
let arr = []; //move it to the global scope function App() { const [value, setValue] = useState(null); function addToArr() { console.log(value); arr.push(value); console.log(arr); } return ( <div>react app <div> <textarea value={value} onChange={(e) => setValue(e.target.value)} > </textarea> <button onClick={addToArr}>Add</button> </div> </div> ); } export default App; Si desea mantener arr internamente, puede usar useRef que solo se refiere al mismo objeto durante las re-renderizaciones.
import React, { useRef, useState } from 'react' function App() { const [value, setValue] = useState(null); const arrRef = useRef([]); function addToArr() { console.log(value); arrRef.current.push(value); console.log(arrRef.current); } return ( <div>react app <div> <textarea value={value} onChange={(e) => setValue(e.target.value)} > </textarea> <button onClick={addToArr}>Add</button> </div> </div> ); } export default App;Para ello tienes 2 formas:
let arr = []; function App() { const [value, setValue] = useState(null); ... } export default App; function App() { ... const [newArrValue, setnewArrValue] = useState([]); const addToArr = () => { ... newArrValue.push(value); setnewArrValue(newArrValue); console.log(newArrValue); }; ... } export default App;