0
185
VistasEl primer clic en el componente secundario no está definido en el componente principal Reaccionar
Quiero implementar un "eliminar contacto cuando se hace clic" en una aplicación simple de administrador de contactos que estoy haciendo para aprender React, pero tiene muchos errores. La primera vez que hago clic en el elemento para eliminarlo, no hace nada y cuando hago clic en otra vez, elimina el anterior. Soy nuevo aprendiendo a reaccionar y no sé por qué sucede esto, ¿alguien puede ayudarme?
const { useState } = React; function AddPersonForm(props) { const [person, setPerson] = useState(""); function handleChange(e) { setPerson(e.target.value); } function handleSubmit(e) { props.handleSubmit(person); setPerson(""); e.preventDefault(); } return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Add new contact" onChange={handleChange} value={person} /> <button type="submit">Add</button> </form> ); } function PeopleList(props) { const [person_, setPerson_] = useState(""); function handleCLick(e) { setPerson_(e.target.textContent); props.handleCLick(person_); } return ( <ul onClick={handleCLick}> {props.data.map((val, index) => ( <li key={index}>{val}</li> ))} </ul> ); } function ContactManager(props) { const [contacts, setContacts] = useState(props.data); function addPerson(name) { setContacts([...contacts, name]); } function removePerson(name_) { let filtered = contacts.filter(function (value) { return value != name_; }); setContacts(filtered); } return ( <div> <AddPersonForm handleSubmit={addPerson} /> <PeopleList data={contacts} handleCLick={removePerson} /> </div> ); } const contacts = ["James Smith", "Thomas Anderson", "Bruce Wayne"]; ReactDOM.render( <ContactManager data={contacts} />, document.getElementById("root") );1 Respuestas
Responde la pregunta0
Tema
Tener el controlador onClick en el elemento de la lista desordenada me parece un poco extraño, pero su problema es un malentendido sobre cuándo se actualiza el estado de React. Las actualizaciones de estado de reacción se ponen en cola y se procesan de forma asíncrona . En otras palabras, cuando pone en cola la actualización de estado setPerson_(e.target.textContent) en handleClick en PeopleList , esa person_ no se ha actualizado en la siguiente línea props.handleCLick(person_); . Está utilizando un estado que aún no se ha actualizado.
Solución
Simplemente envíe el valor del objeto de evento de click a la devolución de llamada props.handleClick directamente. También puede eliminar el estado de person_ local.
function PeopleList(props) { function handleCLick(e) { props.handleCLick(e.target.textContent); } return ( <ul onClick={handleCLick}> {props.data.map((val, index) => ( <li key={index}>{val}</li> ))} </ul> ); } 