首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >通过从一个组件获取数据并将其传递给另一个组件来更新函数调用的参数是滞后的一步。

通过从一个组件获取数据并将其传递给另一个组件来更新函数调用的参数是滞后的一步。
EN

Stack Overflow用户
提问于 2022-03-30 12:41:45
回答 1查看 132关注 0票数 0

当将参数传递给云函数时,它总是传递前一个状态。我正在尝试获取当前在画布上呈现的图像,并将其传递给另一个组件中的云函数。即使我使用的是useState和useEffect,我也无法获得立即的画布状态。它总是传递当前状态之前的图像。我认为这是因为捕获了值,然后是具有云函数的组件呈现的。随后对画布的更改将需要重新呈现云功能组件才能捕获最新的值?

  1. 我从一个组件的画布中获取base64值,如下所示:

代码语言:javascript
复制
        let imageToSave = new Image();
        imageToSave.src = canvas.current.toDataURL('image/png', 1.0)
        return imageToSave.src
        }

  1. ,我希望将它作为一个参数传递给另一个组件中的云函数调用。为此我要做的是:

代码语言:javascript
复制
const [finalImage, setFinalImage] = useState(null)
const { fetch:cloudFetch } = useMoralisCloudFunction(
      "handlemint",
      {
        autoFetch: false,
        userAddress: userAddress,
        image: finalImage
    }

  1. ,现在,我已经尝试了各种方法,在函数调用之前,setFinalImage(props.saveImage())将base64传递给image参数。我尝试过useEffect,在调用云函数之前,我已经在函数中使用了setFinalImage并尝试更新值.

代码语言:javascript
复制
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触发重呈现(一个用于更新所获得的值,另一个用于在获取值时重新呈现组件),但我仍然无法解决这个问题。

EN

回答 1

Stack Overflow用户

发布于 2022-03-31 14:02:03

解决了这个问题!经过3天的绞尽脑汁,

代码语言:javascript
复制
function saveImage() {
        let imageToSave = new Image();
        imageToSave.src = canvas.current.toDataURL('image/png', 1.0)
        imageToSave.onload= () => {
        return imageToSave.src
        }
        }

我在一个onload事件中添加了返回调用。这样只在新的(最新的)映像加载到画布上之后才返回,而不是过早地返回。这样做解决了我过早返回的问题,--这就是为什么我的base64总是在画布上的实际呈现之后出现的原因。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71677441

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档