React: useState延迟问题

Question

我试图用await axios函数的结果更新状态，但状态不同步一个周期。下面是代码…

const Index=() => {
const [fileSelected, setfileSelected]=useState(null)
const [uploadId, setuploadId]=useState('')
const [Fred, setFred]=useState('')
const [fileName, setfileName]=useState('')
const [fileType, setfileType]=useState('')
const [uploadPC, setuploadPC]=useState()
const [backendUrl, setbackendUrl]=useState('http://localhost:4000')
useEffect(() => {
console.log("inside useEffect: ", Fred);
}, [Fred]);

const fileHandler=async(e) =>{
try {
let fileSelected = document.getElementById('myfile').files[0]
let fileName = fileSelected.name
let fileType = fileSelected.type
setfileSelected(fileSelected)
setfileName(fileName)
setfileType(fileType)
console.log(fileSelected)
} catch (err) {
console.error(err, err.message) 
}
}
const startUpload=async(e) =>{
try {
e.preventDefault()

const params = {
fileName: fileName,
fileType: fileSelected.type
};

let resp = await axios.get(`${backendUrl}/start-upload`, { params })
const { uploadId } = resp.data
console.log(uploadId)// this is all OK
setFred(uploadId)
console.log(Fred)//"This displays the previous cycle: ",
uploadMultipartFile()
} catch (err) {
console.log("startupload ",err)
}
}
const uploadMultipartFile=async() =>{    
try {
console.log('Delayed access to the state in here',Fred)
const fileSize = fileSelected.size
const CHUNK_SIZE = 5000000 // 5MB
const CHUNKS_COUNT = Math.floor(fileSize / CHUNK_SIZE) + 1
let promisesArray = []
let start, end, blob
console.log(uploadId)
for (let index = 1; index < CHUNKS_COUNT + 1; index++) {
start = (index - 1) * CHUNK_SIZE
end = (index) * CHUNK_SIZE
blob = (index < CHUNKS_COUNT) ? fileSelected.slice(start, end) : fileSelected.slice(start)
let getUploadUrlResp = await axios.get(`${backendUrl}/get-upload-url`, {
params: {
fileName: fileName,
partNumber: index,
uploadId: Fred,
}
})
etc

正确的uploaddid在uploadMultipartFile中不可用，这导致了很大的问题。

我听说我应该useEffect，但不知道现在该怎么做。我从一个类重构，这工作OK

Answer 1

setFred是异步方法，所以不能在setFred()之后立即得到Fred的更新值。

setFred(uploadId)
console.log(Fred) // This will console old state value of `Fred`

您应该使用useEffect并添加Fred依赖项来检查更新的值。

useEffect(() => {
console.log(Fred)
if (Fred) // This means if Fred is not default empty state.
uploadMultipartFile()
}, [Fred])

Answer 2

看看是否有帮助:

你能把uploadMultipartFile()移出你的组件吗?让setState呼叫从startUpload发出。

const startUpload = async (e) => {
try {
// 1 - GATHER NECESSARY PARAMETERS HERE fileName uploadId etc...
// 2 - CALL await uploadMultipartFile(...necessaryParameters)
// 3 - SET NECESSARY STATE AFTER SUCCESSFUL UPLOAD
}
catch {
// HANDLE ERRORS FROM UPLOAD CODE
}
}

这能解决你的问题吗?