Soy nuevo en React. Tengo dos campos de entrada que se llenan cuando las páginas se cargan a través de axios, pero cuando quiero cambiar los valores, no puedo cambiarlos, incluso si no puedo escribir nada en ellos.
function MainView() { const [InputFields, setInputFields] = useState({ name: "", fullURL: "", }); const changeHandler = (e) => { setInputFields({ ...InputFields, [e.target.name]: e.target.value, }); }; const [links, setLinks] = useState([]); const getLinks = () => { axios.get('../sanctum/csrf-cookie').then(response => { axios.get("/userlinks/getdata").then((res) => { console.log(res); setLinks(res.data); }).catch((err) => { console.log(err); }); }); }; useEffect(() => { getLinks(); }, []); return (<div> {links.map((link) => { return (<div className="card" key={link.id}> <form> <input className="form-control" value={link.name} type="text" name="name" placeholder="name" onChange={changeHandler} /> <input className="form-control" value={link.fullURL} type="text" name="fullURL" placeholder="fullURL" onChange={changeHandler} /> </form> </div>); })} </div> ); } export default MainView;Esto sucede porque en su método onChange , está cambiando la variable InputFields , mientras que su método getLinks cambia la variable de links , que se representa en la pantalla.
Si desea establecer un valor inicial y luego permitir que el usuario lo cambie, cambie su entrada a:
<input className="form-control" defaultValue={link.name} value={InputFields.name} type="text" name="name" placeholder="name" onChange={changeHandler} /> Del mismo modo, cambie para su otra entrada, si no desea que el usuario cambie el valor más adelante, a menudo es mejor agregar disable en la entrada para evitar confundir a las personas. 🙂
Sé que esto se ha hecho para que pueda crear un ejemplo reproducible mínimo para nosotros, pero hubiera llamado directamente a setInputFields en la sección axios.get para evitar este problema en primer lugar, sin embargo, si no es posible, use el defaultValue y value como he mostrado arriba.