Reactjs 如何查看函数中的状态？使用挂钩

我试图在updateFile函数中更新uploadFiles状态，在重新加载文件时，我在钩子中重写此组件，但在函数中状态为空

const[uploadedFiles，setUploadedFiles]=useState({
幻灯片：[]，
材料：[]，
});
const updateFile=useCallback(
（id，数据）=>{
const value=uploadedFiles.slides.map（uploadedFile=>{
返回id==uploadedFile.id
？{…上传文件，…数据}
：上传文件；
});
console.log（'value'，value）；
log（'uploadedFilesOnFunction'，uploadedFiles）；
},
[上传的文件]
);
函数processUpload（upFile，类型）{
const data=新表单数据（）；
data.append（'file'，upFile.file，upFile.name）；
应用程序编程接口
.post（'dropbox'，数据{
onUploadProgress:e=>{
const progress=parseInt（数学轮（（e.loaded*100）/e.total），10；
updateFile（upFile.id{
进步，
});
},
})
。然后（响应=>{
updateFile（upFile.id{
上传：对，
id:response.data.id，
url:response.data.url，
类型，
});
})
.catch（响应=>{
updateFile（upFile.id{
错误：正确，
});
});
}
函数handleUpload（文件，类型）{
const upload=files.map（文件=>({
文件
id:uniqueId（），
name:file.name，
readableSize:filesize（file.size），
预览：URL.createObjectURL（文件），
进展：0，
上传：错，
错误：false，
url:null，
类型，
}));
设置加载的文件({
幻灯片：上传文件.slides.concat（上传），
});
forEach（e=>processUpload（e，type））；
}
log（'slides'，上载的文件）；

我希望函数可以查看状态值。让我来操纵和设置状态

---

可能还有其他问题，但我注意到一件事：

const [uploadedFiles, setUploadedFiles] = useState({
  slides: [],
  material: [],
});

// A setState CALL FROM THE useState HOOK REPLACES THE STATE WITH THE NEW VALUE

setUploadedFiles({
  slides: uploadedFiles.slides.concat(uploaded),
});

发件人：

状态变量可以很好地保存对象和数组，因此您仍然可以将相关数据分组在一起。但是，与类中的this.setState不同，更新状态变量总是替换它，而不是合并它。

来自

useState

钩子的

setState

不会合并状态。因为它可以保存任何类型的值，而不仅仅是对象，就像我们以前对类所做的那样

从代码中可以看到，在这样更新时，正在从状态中删除某些属性

相反，您应该使用

setState

的函数形式并访问当前状态

prevState

，如：

setUploadedFiles((prevState) => {
  return({
    ...prevState,
    slides: uploadedFiles.slides.concat(uploaded)
  });
});

---

更新的updateFiles函数：

constupdatefile=（id，data）=>{
setUploadedFiles（prevState=>{
const newSlide=prevState.slides.map（slide=>{
返回id==slide.id？{…slide，…data}：slide；
});
返回{
…国家，
幻灯片：newSlide，
};
});
};