useEffect(() => { if(readyToSend){ let data = { "email":"example.org", "newsletter": true }; let jsonData = JSON.stringify(data); let encodedData = encodeURIComponent(jsonData); let url = "https://example/receiver/external" let fetchUrl = url + "?datajsonstr=" + encodedData + "&_=" + (new Date()).valueOf(); let datafetch = fetch(fetchUrl); datafetch.then(data => { props.setDataDone(true) }) }})No quiero codificar los valores en mi código. Los valores pueden provenir de Form (TextField).
Querrá almacenar los valores de sus entradas en el estado para que cuando se envíe su formulario pueda especificar el estado y cargarlo en su servidor.
Aquí hay una versión funcional con una API simulada , y aquí está el código.
const { useState } = React; function mockApi(data) { return new Promise((res, rej) => { setTimeout(() => res(`${data} stored`), 2000); }); } function Example() { // Set state as an object const [ form, setForm ] = useState({}); // When the form is submitted call the API endpoint // with the JSON async function handleSubmit(e) { e.preventDefault(); const msg = await mockApi(JSON.stringify(form)); console.log(msg); } // Every time an input's value changes, // update the state function handleChange(e) { const { name, value } = e.target; setForm({ ...form, [name]: value }); } return ( <form onSubmit={handleSubmit} onChange={handleChange}> <input type="text" name="name" required /> <input type="password" name="password" required /> <button type="submit">Submit</button> </form> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>