当将参数传递给云函数时,它总是传递前一个状态。我正在尝试获取当前在画布上呈现的图像,并将其传递给另一个组件中的云函数。即使我使用的是useState和useEffect,我也无法获得立即的画布状态。它总是传递当前状态之前的图像。我认为这是因为捕获了值,然后是具有云函数的组件呈现的。随后对画布的更改将需要重新呈现云功能组件才能捕获最新的值?
let imageToSave = new Image();
imageToSave.src = canvas.current.toDataURL('image/png', 1.0)
return imageToSave.src
}const [finalImage, setFinalImage] = useState(null)
const { fetch:cloudFetch } = useMoralisCloudFunction(
"handlemint",
{
autoFetch: false,
userAddress: userAddress,
image: finalImage
}setFinalImage(props.saveImage())将base64传递给image参数。我尝试过useEffect,在调用云函数之前,我已经在函数中使用了setFinalImage并尝试更新值.async function updateFinalImage(image) {
setFinalImage(image)
}
const cloudCall = async ()=>{
const image = await props.saveImage()
await updateFinalImage(image)
await cloudFetch({
onSuccess: (data)=>console.log(data)
})
}对于所有这些,我都尝试过常规和异步。不管我做什么,传递给我的image 参数的值总是比慢一步。因此,如果我在画布上有一张狗图片,空值将被传入。然后,当我在画布上把狗换成猫的图片时,狗(前一张照片)就会被传递进来。
我的saveImage函数没有滞后。如果我控制台将它记录在子组件中,它会给我画布上最新的值。在使用cloudCall更新传递到useState时,总是会出现以前的值,而不是当前更新的值。我试图通过将useState放在函数中来规避它的异步特性,但是没有任何效果。我做错了什么?
我的问题是如何从父组件的函数base64中获取saveImage(),并将其作为image: finalImage传递到云函数中,以便在调用云函数时始终采用最新的更新。现在,尝试useState更新image的值总是发送前一个值。编辑:--我发现了一个类似的答案--适用于我的情况--关键是:此外,这里的主要问题不仅是异步性质,而且状态值是由基于当前闭包的函数使用的,状态更新将在下次重新呈现时反映出来,这样就不会影响现有的闭包,而是创建新的闭包。
然而,即使我尝试使用2 useEffects触发重呈现(一个用于更新所获得的值,另一个用于在获取值时重新呈现组件),但我仍然无法解决这个问题。
发布于 2022-03-31 14:02:03
解决了这个问题!经过3天的绞尽脑汁,!
function saveImage() {
let imageToSave = new Image();
imageToSave.src = canvas.current.toDataURL('image/png', 1.0)
imageToSave.onload= () => {
return imageToSave.src
}
}我在一个onload事件中添加了返回调用。这样只在新的(最新的)映像加载到画布上之后才返回,而不是过早地返回。这样做解决了我过早返回的问题,--这就是为什么我的base64总是在画布上的实际呈现之后出现的原因。
https://stackoverflow.com/questions/71677441
复制相似问题