0

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

问题

刷新页面时会引发以下错误：

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

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

代码

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')
  );

应用程序.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;

生成宠物.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, contentHash, petPrice, 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, contentHash, petPrice, tokenURI)}}>Generate New Pet</button>
            </div>
            <div>{txStatus()}</div>
        </div>
    )
}

包.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"
    ]
  }
}
4

0 回答 0