Блог

Я пытаюсь отобразить имя изображения, когда оно загружается в форму. Итак, я создал для этого состояние. У меня есть функция, которая обрабатывает загрузку изображений, и другая функция, которая отправляет форму. Итак, я должен объявить FormData вне функции, потому что я хочу отправить и изображение, и форму одновременно. Проблема в том, что вызов setState() повторной визуализации приводит к повторной загрузке загруженного изображения. Я уже нашел решение, сохранив изображение в состоянии, следовательно, оно не теряет данные после повторного рендеринга. Я хочу выяснить, есть ли лучший способ сделать это.

 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)
    } 
}
 

Вы можете использовать let ImageUploaded, за исключением использования этого параметра в случае useState. Потому что, когда вы используете useState для своих переменных, ваш текущий рендеринг детали и ваши предыдущие данные let могут быть потеряны.