javascript 在单击事件中调用多个函数

chy5wohz 于 2023-06-28 发布在 Java

关注(0)|答案(1)|浏览(127)

我一直在尝试调用三个函数的JSX点击事件的事情是有三个函数是saveDataclearData和loadData内的multiFunc和前2个函数的工作如预期我可以看到，通过打印出他们的内容在控制台，但第三个函数不工作，直到再次点击调用multiFunc我想做的是单击JSX事件并单击一下即可执行每个函数。这是我目前为止的代码

const [savedImageData, setSavedImageData] = useState(null);

  const saveData = async () => {
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const dataURL = canvas.toDataURL();
  
      setSavedImageData(dataURL);
      setStore(prevStore => [...prevStore, dataURL]);
      console.log(dataURL);
      console.log('data saved');
    }
  };

 const clearData = () => {
    const canvas = canvasRef.current
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    console.log('data cleared ')
    return true 
  };

  const loadData = () => {
    if (savedImageData) {
      setImageUrl(savedImageData);
      console.log(savedImageData)
      setIsRetrieveData(true);
      setIsDrawing(false); // Reset the drawing state
      console.log('data loaded ')
     
    }
  };

这是我想调用的函数

const multiFunc = () => {
      saveD();
      clearData();
      loadData();
  };

///JSX
      <button onClick={multiFunc}>next</button>

我想让它一个接一个地工作在一个点击上我已经尝试了async/await和promise在multiFunc上，但没有工作我仍然要点击两次才能让loadData工作，在我看来，我的问题是在loadData函数的逻辑内部，但你有什么建议？

JavaScript

来源：https://stackoverflow.com/questions/76560341/call-multiple-functions-in-on-single-click-event

1条答案

按热度按时间

mgdq6dx11#

您可以在useEffect中移动load函数。您的代码没有按预期工作，因为当调用load时，savedImageData是null。useEffect将确保仅在savedImageData不是null时调用load

export default function App() {
  const [savedImageData, setSavedImageData] = React.useState(null);

  const saveData = async () => {
    if (!canvasRef.current) return;
    const canvas = canvasRef.current;
    const dataURL = canvas.toDataURL();

    setSavedImageData(dataURL);
    setStore((prevStore) => [...prevStore, dataURL]);
  };

  const clearData = () => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    console.log('data cleared ');
    return true;
  };

  const loadData = (imageData) => {
    if (!imageData) return;
    setImageUrl(imageData);
    setIsRetrieveData(true);
    setIsDrawing(false); // Reset the drawing state
  };

  const handleClick = async () => {
    await saveData();
    clearData();
  };

  React.useEffect(() => {
    loadData(savedImageData);
  }, [savedImageData]);

  return <button onClick={handleClick}>next</button>;
}

赞(0）回复(0）举报 2023-06-28

我来回答

javascript 在单击事件中调用多个函数

1条答案

相关问题

热门标签

最新问答