Estoy tratando de mostrar el nombre de una imagen cuando se carga en un formulario. Entonces, creé un estado para eso. Tengo una función que maneja la carga de imágenes y otra función que envía el formulario. Entonces, tengo que declarar formData fuera de la función porque quiero enviar la imagen y el formulario al mismo tiempo. El problema es que llamar a setState() se vuelve a renderizar y hace que la imagen cargada se cargue nuevamente. Ya encontré una solución almacenando la imagen en un estado, por lo tanto, no pierde los datos después de volver a renderizar. Quiero saber si hay alguna forma mejor de hacer esto.

 const [ImageUploaded, setImageUploaded] = useState('') const [response, setResponse] = useState(null) const [error, setError] = useState(null) const [loading, setLoading] = useState(false) let fd = new FormData() const onImageUpload = async (e) => { let file = e.target.files[0] fd.append('file', file) setImageUploaded(file.name)// this causes a re-render and fd re-initializes and data saved is lost } const uploadProduct = async(e) => { e.preventDefault() setLoading(true) try { const productData = { productName: inputState.productName.value, description: inputState.description.value, price: inputState.price.value, quantity: inputState.quantity.value } const {data} = await axios.post('/api/products/new', productData) const response = await axios.post(`/api/upload/${data.id}`, fd, { headers: { 'Content-Type': `multipart/form-data` }, onUploadProgress: (uploadState) => console.log(uploadState.loaded) }) setLoading(false) if (response.status===200) { setResponse(true) } } catch (error) { setLoading(false) setError(true) } }