0
599
Views¿Por qué JSON.stringify vuelve a ser nulo?
Se supone que el usuario debe ingresar texto en un cuadro y enviarlo desde el front-end (react js) a mongodb pasando por nodejs. Todo esto funciona bien, pero el problema es que lo que se envía es nulo en lugar del texto real. Así que seguí adelante y consolado.log JSON.stringify y, sorprendentemente, estaba regresando {}.
Por favor, avíseme si me falta algo.
archivo pingbutton.js:
const Pingbutton = () => { const [form, setForm] = useState({ message: "", }); const navigate = useNavigate(); function updateForm(value) { return setForm((prev) => { return { ...prev, ...value }; }); } async function onSubmit(e) { console.log("This is e: " + e); console.log("This is form: " + form); e.preventDefault(); const newMessage = { ...form }; console.log("3: " + newMessage); console.log("5: " + JSON.stringify(newMessage)); await fetch("http://localhost:5000/record/add", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(newMessage), }).catch((error) => { window.alert(error); return; }); setForm({ message: "" }); navigate("/"); } return ( <> <form onSubmit={onSubmit}> <textarea className="message" type="text" placeholder="Type somthing!" // value={this.state.val} ></textarea> <div className="body"> <button className="button" type="text" value={form.name} onClick={(e) => { magic(); updateForm({ message: e.target.value }); handleButtonClick(); }} > <span className="default">Ping</span> <span className="success">Wohoo! You Pinged Me!</span> <div className="left"></div> <div className="right"></div> </button> </div> </form> </> ); }; export default Pingbutton; Esta es una foto de mi consola: 
1 answers
Answer question0
En su formulario, no está manejando los cambios en el área de texto. Para hacerlo, actualicé el JSX, ver a continuación:
return ( <> <form onSubmit={onSubmit}> <textarea className="message" type="text" placeholder="Type somthing!" value={form.message} onChange={(e) => updateForm({ message: e.currentTarget.value})} ></textarea> <div className="body"> <button className="button" type="submit" > <span className="default">Ping</span> <span className="success">Wohoo! You Pinged Me!</span> <div className="left"></div> <div className="right"></div> </button> </div> </form> </> ); Dado que está utilizando onSubmit con su formulario, también puede hacer que su botón sea type="submit" y eliminar el controlador onClick , a menos que lo necesite para otra cosa.
Para manejar el cambio de área de texto, agregue un controlador onChange a ese elemento, similar a lo que ya hizo en el botón.