使用毛毛雨重新加载页面时出现错误反应 dapp？

问题描述

我正在开发一个 dapp，它运行良好，但我面临一个问题，它阻碍了我的开发。

问题

刷新页面时会抛出以下错误：

未捕获的类型错误：无法读取 null 的属性“合同”。

未捕获的类型错误：无法解构“drizzleData.drizzleState”的属性“transactions”，因为它为空。 当我创建组件并渲染它时，它工作正常，但是当我刷新页面时，它会抛出这些错误...

代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Drizzle } from "@drizzle/store";
import PetShop from "./contracts/PetShop.json";
import { DrizzleContext } from '@drizzle/react-plugin';
import App from './App';

const options = {
     contracts: [PetShop],web3: {
       fallback: {
         type: "ws",url: "ws://127.0.0.1:7545",},};

   const drizzle = new Drizzle(options);
   console.log('in index: ',drizzle);  

   ReactDOM.render(
    <React.StrictMode>
      <DrizzleContext.Provider drizzle={drizzle}>
          <App />
      </DrizzleContext.Provider>
    </React.StrictMode>,document.getElementById('root')
  );

App.js

import React,{ useContext } from 'react';
import { DrizzleContext } from '@drizzle/react-plugin';
import { GeneratePet } from './components/GeneratePet';
import { PetList } from './components/PetList';

const App = () => {
  console.log('in app drizzle context:',DrizzleContext);
  const drizzleData = useContext(DrizzleContext.Context);
  console.log('in app drizzle data:',drizzleData);

  if (!drizzleData.initialized) <h4>"Drizzle Loading..."</h4>;

  return (
    <div>
      <h3>Hello Dapp World</h3>
      <GeneratePet />
      <PetList />
    </div>
  )
}

export default App; 

GeneratePet.js

import React,{ useState,useContext } from 'react'
import { DrizzleContext } from '@drizzle/react-plugin';

export const GeneratePet = () => {
    const [stackId,setStackId] = useState(null);
    const drizzleData = useContext(DrizzleContext.Context);

    const [petName,setPetName] = useState('');
    const [contentHash,setContentHash] = useState('');
    const [petPrice,setPetPrice] = useState('');
    const [tokenURI,setTokenUri] = useState('');  

    const txStatus = () => {
        console.log('generate pet:',drizzleData)
        const { transactions,transactionStack } = drizzleData.drizzleState;
        const txHash = transactionStack[stackId];

        if (!txHash) return null;  
        return `Transaction status: ${transactions[txHash] && transactions[txHash].status}`;
    };

    const setValue = async (petName,contentHash,petPrice,tokenURI) => {
        const { drizzle,drizzleState } = drizzleData;
        const contract = drizzle.contracts.PetShop;

        const stackId = await contract.methods["generatePet"].cacheSend(petName,tokenURI,{
            from: drizzleState.accounts[0],});
        setStackId(stackId);
        };

        return (
        <div>
            <div>
                <input type='text' onChange={(e) => {setPetName(e.target.value)}} value={petName} placeholder='enter pet name' /> <br />
                <input type='text' onChange={(e) => {setContentHash(e.target.value)}} value={contentHash} placeholder='enter content hash' /> <br />
                <input type='text' onChange={(e) => {setPetPrice(e.target.value)}} value={petPrice} placeholder='enter pet price' /> <br />
                <input type='text' onChange={(e) => {setTokenUri(e.target.value)}} value={tokenURI} placeholder='enter pet uri' /> <br />
                <button onClick={() => {setValue(petName,tokenURI)}}>Generate New Pet</button>
            </div>
            <div>{txStatus()}</div>
        </div>
    )
}

Package.json

{
  "name": "client","version": "0.1.0","private": true,"dependencies": {
    "@drizzle/react-plugin": "^1.5.3","@drizzle/store": "^1.5.3","@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.1.0","@testing-library/user-event": "^12.1.10","ipfs-api": "^26.1.2","react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "4.0.3","web-vitals": "^1.0.1"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": [
      "react-app","react-app/jest"
    ]
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）