Я пытаюсь обновить состояние с помощью метода handleChangeProps, но каким-то образом, наконец, fields.fileName устанавливается как пустая строка вместо фактического значения. Я использую Material-ui DropZone для файла и для имени TextField. addNsmFile вызывается, когда вызывается onSubmit. Остальные поля: name, fileData не пустые, фактическое значение установлено, и я могу получить их в функции addNsmFile. Можете ли вы помочь мне понять, почему для поля fields.fileName наконец-то установлено пустое значение?

const [fields, setFields] = useState({
    name : '',
    fileName: '',
    fileData: ''
})

const handleChangeProps = (name, value) => {           

    if (name === 'name' ) {
       if (validator.isEmpty(value.trim())) {
            setNameError('Enter NSM Name')
       } else if (value.trim().length > 512) {
            setNameError('The maximum length for NSM name is 512. Please re-enter.')
       } else {
            setNameError('')
       }
    }

    if (name === 'fileData') {
        console.log('fileData', value)
        if (validator.isEmpty(value.trim())) {
            setFileuploadError('Drag and drop or browse nsm file')
       } else {
            setFileuploadError('')
       }
    }

    setFields({ ...fields, [name]: value })

}

const addNsmFile = () =>{
    let nsmForm = new FormData()
    nsmForm.append('name', fields.name)
    nsmForm.append('fileName', fields.fileName)
    nsmForm.append('fileData', fields.fileData)
    NSMDataService.addFile(nsmForm).then((response)=>{
        
        if (response.data.substring(0, 1) === '0') {
            const results = JSON.parse(response.data.substring(2))
            addNotification('success', 'NSM file is being added successfully.')
            //props.onRowSelectionChange(results.addFile)
            props.setOpenDialog(false)
            props.setRefresh(results.addFile[0].id)
        } else if (response.data.substring(0, 1) === '1') {
            addNotification('error', response.data.substring(2))
            props.setOpenDialog(false)
        }
        
    }).catch((error)=>{
        console.log(error)
    })
}
<DropzoneArea
    acceptedFiles={[".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values"]}
    maxFileSize={1000000000} //1GB
    dropzoneText='Drag and drop a NSM file here or click to add'
    showFileNames= {true}
    showPreviews={false}
    useChipsForPreview={true}
    showAlerts={true}
    filesLimit={1}
    classes={{root:classes.rootDropzoneArea, icon: classes.iconDropzoneArea, text: classes.textDropzoneArea}} 
    onChange={(files) => {
        files.forEach((file) => {
            console.log(file)
            handleChangeProps('fileName', file.name)
            let reader = new FileReader()
            reader.onload = function(event) {
                let contents = event.target.result
                handleChangeProps('fileData', contents)
                console.log("File contents: " + contents)
            }
            reader.onerror = function(event) {
                console.error("File could not be read! Code " + event.target.error.code)
            }
            reader.readAsText(file);
        })
    }}
    onDelete={(file)=> {
        handleChangeProps('fileData', '')
    }
    }
/>
0
vasudev 11 Фев 2021 в 09:14

1 ответ

Лучший ответ

Я думаю, проблема может быть в вашем обновлении setFields () в handleChangeProps. Попробуйте сделать так:

setFields(prevState => ({
  ...prevState,
  [name]: value,
}))
1
Srivastava 11 Фев 2021 в 07:18