reaccionar novato aquí una vez más. Estoy tratando de actualizar la página con una nota al presionar el botón 'enviar'. Honestamente, lo intenté durante tanto tiempo que creo que mi código es un desastre.
Función principal:
function MainLogged() { const [sendingScreen, setSendingScreen] = useState(true); let notes = []; const [note, setNote] = useState('') function onNoteChange(event){ const {value} = event.target; setNote(value); } function afterButtonClick(event) { notes.push(note); setSendingScreen((prev) => !prev) } return ( <div id='main'> {sendingScreen ? <MainBody noteCallback={onNoteChange} callback={afterButtonClick}/> : <ResetScreen callback={afterButtonClick}/> } {console.log(notes)} { notes.map((singleNote) => { return (<p id='single-note' className='note'>{singleNote}</p>) }) } </div> ) }luego va al componente:
function MainBody(props) { const {noteCallback, callback} = props; return ( <div> <p id='main-body'>{lorem}</p> <div className='card text-center' style={{width: '18rem', alignSelf: 'center'}}> <Input onChange={noteCallback} type='text' placeholder='My note is...' className='card-body information' /> </div> <SendCardButton callback = {callback}/> </div> ) }y finalmente (si es necesario):
function SendCardButton(props){ const {callback} = props; return ( <button type="button" className="btn btn-success toBeCentered" onClick={callback}>Send</button> ) }El uso de este código deja la matriz de notas siempre vacía.
Por favor, si puede explicarme para que pueda aprender y mejorar, REALMENTE lo necesito ahora mismo. ¡Muchas gracias!
React no vuelve a renderizar su componente después de hacer clic en el botón porque las notas no se almacenan en el estado. Necesitas declarar notas de esta manera:
const [notes, setNotes] = useState([]);Y luego configúrelos al hacer clic en el botón, no solo presione el nuevo:
setNotes((prevNotes) => ([...prevNotes, note]));Eso debería ser suficiente :) Siéntase libre de comentar si tiene más preguntas