Truffle

在 React 中使用 Drizzle 庫時遇到問題

  • September 14, 2018

使用 Ubuntu 16.04

問候,我一直在關注這裡的 Drizzle 啟動和執行教程。當我嘗試從終端使用“npm start”命令執行應用程序時,我進入了這一步。然後,我收到一個錯誤消息“TypeError:毛毛雨未定義”。我通過 npm 更新軟體包後再次嘗試,但錯誤仍然存在。我已經複製了我在下面使用的程式碼:

應用程序.js:

   import React, { Component } from 'react';
   import logo from './logo.svg';
   import './App.css';

   class App extends Component {
     state = { loading: true, drizzleState: null };

     componentDidMount() {
       const { drizzle } = this.props;

       // subscribe to changes in the store
       this.unsubscribe = drizzle.store.subscribe(() => {

         // every time the store updates, grab the state from drizzle
         const drizzleState = drizzle.store.getState();

         // check to see if it's ready, if so, update local component state
         if (drizzleState.drizzleStatus.initialized) {
           this.setState({ loading: false, drizzleState });
         }
       });
     }

     compomentWillUnmount() {
       this.unsubscribe();
     }

     render() {
       if (this.state.loading) return "Loading Drizzle...";
       return <div className="App">Drizzle is ready</div>;
     }
   }

   export default App;

index.js

           import React from 'react';
           import ReactDOM from 'react-dom';
           import './index.css';
           import App from './App';
           import registerServiceWorker from './registerServiceWorker';
           // import drizzle functions and contract artifact
           import { Drizzle, generateStore } from "drizzle";
           import 'contract_name' from "./contracts/'contract_name'.json";

           ReactDOM.render(<App />, document.getElementById('root'));
           registerServiceWorker();

           // let drizzle know what contracts we want
           const options = { contracts: ['contract_name'] };

           // setup the drizzle store and drizzle
           const drizzleStore = generateStore(this.props.options);
           const drizzle = new Drizzle(this.props.options, drizzleStore);

出於隱私原因,我用“contract_name”替換了我正在使用的契約的實際名稱。有什麼明顯的我做錯了嗎?

在您的 index.js 文件中,您需要將 drizzle 實例作為道具傳遞給 App 組件:

ReactDOM.render(<App drizzle={drizzle} />, document.getElementById("root"));

你還應該在 ReactDOM.render 之前聲明你的常量:

...
// let drizzle know what contracts we want
const options = { contracts: [MyStringStore] };

// setup the drizzle store and drizzle
const drizzleStore = generateStore(options);
const drizzle = new Drizzle(options, drizzleStore);

// pass in the drizzle instance
ReactDOM.render(<App drizzle={drizzle} />, document.getElementById("root"));
registerServiceWorker();

引用自:https://ethereum.stackexchange.com/questions/58136