问题是契约方法是在基于类的组件中工作，而不是在基于功能的组件中工作。在下一步还是反应js，两个.why？

Question

//这一次没有工作，.it给出了错误，module.methods.getdeployedContracts().call()是//不是函数/

import factory from "../ethereum/factory";
import { Component } from "react";

function Home({ campaigns }) {
  console.log(campaigns);
  return <div>{campaigns[0]}</div>;
}
Home.getInitialProps = async () => {
  const res = await factory.methods.getDeployedContracts().call();
  return { campaigns: res };
};

export default Home;

//但当我将其更改为基于类的组件时，它会工作//

import factory from "../ethereum/factory";
import { Component } from "react";

class Home extends Component {
  static async getInitialProps() {
    const campaigns = await factory.methods.getDeployedCampaigns().call();

    return { campaigns };
  }

  render() {
    const { campaigns } = this.props;
    console.log("campaigns", campaigns);
    return (
      <div>
        <h3>{this.props.campaigns[0]}</h3>
      </div>
    );
  }
}

export default Home;

在这里输入图像描述

Answer 1

检查功能组件代码。

function Home({ campaigns }) {
  console.log(campaigns);
  return <div>campaigns</div>; ---- Here is the problem
}
Home.getInitialProps = async () => {
  const res = await factory.methods.getDeployedContracts().call();
  return { campaigns: res };
};

您只是将活动作为文本并在div中呈现，但您希望将其用作变量。就像在类组件中使用它一样。

return <div>{campaigns}</div>;

它会打印出竞选活动中存储的任何价值。如果它是一个数组，迭代它并打印它的元素。