Reactjs 反应集状态不更新对象数据

我正在尝试使用

handleChangeProps

方法更新状态，但最终将

字段.fileName

设置为空字符串，而不是实际值。我正在为文件和名称文本字段使用材质ui DropZone。调用

onSubmit

时，将调用

addNsmFile

。其余字段：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', '')
    }
    }
/>

const[fields，setFields]=useState({
名称：“”，
文件名：“”，
文件数据：“”
})
const handleChangeProps=（名称、值）=>{
如果（名称=='name'）{
if（validator.isEmpty（value.trim（）））{
setNameError（'输入NSM名称'）
}else if（value.trim（）.length>512）{
setNameError（'NSM名称的最大长度为512。请重新输入'）
}否则{
setNameError（“”）
}
}
如果（名称=='fileData'）{
console.log（'fileData'，值）
if（validator.isEmpty（value.trim（）））{
setFileuploadError（'拖放或浏览nsm文件'）
}否则{
setFileuploadError（“”）
}
}
集合字段（{…字段，[名称]：值}）
}
常量addNsmFile=（）=>{
设nsmForm=new FormData（）
nsmForm.append（'name'，fields.name）
nsmForm.append（'fileName'，fields.fileName）
nsmForm.append（'fileData'，fields.fileData）
NSMDataService.addFile（nsmForm）.then（（响应）=>{
if（response.data.substring（0，1）='0'）{
const results=JSON.parse（response.data.substring（2））
addNotification（'成功'，'正在成功添加NSM文件'）
//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（（错误）=>{
console.log（错误）
})
}
{
files.forEach（（文件）=>{
console.log（文件）
handleChangeProps（'fileName'，file.name）
let reader=new FileReader（）
reader.onload=函数（事件）{
让内容=event.target.result
handleChangeProps（'fileData'，内容）
log（“文件内容：”+内容）
}
reader.onerror=函数（事件）{
console.error（“无法读取文件！代码”+event.target.error.Code）
}
reader.readAsText（文件）；
})
}}
onDelete={（文件）=>{
handleChangeProps（'fileData'，''）
}
}
/>

我认为问题可能在于handleChangeProps中的setFields（）更新。试着这样做：

setFields(prevState => ({
  ...prevState,
  [name]: value,
}))

---

我在这段代码中没有看到明显不正确的地方。在这一点上，我唯一的猜测是，您正在循环中排队等待状态更新，因此您应该真正使用函数状态更新，即

setFields（fields=>（{…fields，[name]：value}））。