使用React中的毛毛雨库时出现问题

Question

使用Ubuntu 16.04

问候，我所遵循的教程，让毛毛雨和运行定位这里。当我试图使用终端上的"npm“命令运行应用程序时，我进入了这步骤。然后我遇到了一个错误，上面写着"TypeError:毛毛雨是未定义的“。在通过npm更新软件包之后，我再次尝试，但错误继续存在。我已经复制了下面使用的代码：

app.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”替换了合同的实际名称。有什么明显的事情我做错了吗？

Answer 1

在您的index.js文件中，您需要将毛毛雨实例作为支持传递到：

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

您还应该在ReactDOM.render之前声明您的consts：

...
// 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();