reactjs - コンポーネントの再レンダリング時に tx を拒否

Question

メタマスクで動作する反応と ethers.js を使用して webapp を作成しています。MyContract.MyFunc(xyz, function(error, result){ }); を呼び出すと、ユーザーには、メタマスク ポップアップが表示されます。ユーザーがSUBMITまたはREJECTを押した場合にのみ、私のコードは応答を受け取ります。しかし、ユーザーが SUBMIT または REJECT を押さずにページを更新すると、ユーザーはまだこのトランザクションを送信できますが、私のコードはこのトランザクションのステータスを認識しません。

コードの最初の部分でトランザクションを送信し、2 番目の部分で API に情報を投稿します。私の問題は、コードのトランザクション部分が、ユーザーがトランザクションを確認して署名するためのメタマスク ポップアップを生成することです。ユーザーが期待どおりにトランザクションを続行すると、私のコードは問題なく動作します。ただし、ユーザーがページを更新するか、メタマスクポップアップが生成された後、それを確認する前にコンポーネントの状態をリセットし、ページのリロード後にそれを確認すると、データを API に投稿できません。アプリが壊れます。これを止めるにはどうすればよいですか？ページのリロード時にトランザクションを拒否したり、メタマスクに署名されていないトランザクションがあるかどうかを確認したりする方法はありますか?

    try {
      const price = await connectedContract.getMintPrice();
      const transaction = await connectedContract.primeMint({
        value: price,
      });
      const receipt = await transaction.wait();
      blockNumber = receipt.blockNumber;
    } catch (err) {
      console.error(err);
      setState({ ...state, button: false });
    }
    axios
      .post("http://localhost:5000/api/mints", {
        _id: _address,
        blockNumber: blockNumber,
      })
      .then(() => {
        setState({
          status: "Loading",
          blockNumber: blockNumber,
          button: false,
        });
      })
      .catch((err) => {
        console.error(err);
        setState({ ...state, button: false });
      });