从智能合约数组中获取数据

Question

我有一个部署另一个智能合约的工厂智能合约。

在工厂合同中我有这个功能

address[] public migrations;

...

function getMigrations() public view returns (address[] memory) {
        return migrations;
    }

在此数组中推送迁移后，我想在第一页上显示地址列表，但我真的不能。

这是我尝试过的：

import React from "react";
import web3 from "./web3";
import factory from "./factory";
import AccordionExampleStyled from "./components/Acordeon";
import { Card, Button } from "semantic-ui-react";

import 'semantic-ui-css/semantic.min.css'



class App extends React.Component {

  static async getInitialProps() {
    const migration = await factory.methods.getMigrations().call();

    return { migration };
  
  };

renderCampaigns() {
    const items = this.props.migration.map((address) => {
      return {
        header: address,
        description: (
          <Button>See migration</Button>
        ),
        fluid: true,
      };
    });
    return <Card.Group items={items} />;
  }
  render() {
    return (
      
      <div>
      <center>
        <h2>MigrationHelper by DRIVENecosystem</h2>
        <p>
         <p><AccordionExampleStyled /></p>
          <p>List of all migrations </p>
          <p></p>
          {this.renderCampaigns()}
        </p>
       </center>
      </div>
    );
  }
  };
  

export default App;

我收到此错误：无法读取未定义的属性（读取“地图”）

PS 我是 React.js 和 web3 的新手

编辑：我也试过那个选项，但没有

import React from "react";
import web3 from "./web3";
import factory from "./factory";
import AccordionExampleStyled from "./components/Acordeon";


import 'semantic-ui-css/semantic.min.css'



class App extends React.Component {

  static async getInitialProps() {
   const migrations = await factory.methods.getMigrations().call();

    return { migrations };
  }
 
   renderMigrations(){
   const items = this.props.migrations.map((migrations) => {return{migrations}});
    return <li>{items}</li>;
} 

  render() {
    return (
      
      <div>
      <center>
        <h2>MigrationHelper by DRIVENecosystem</h2>
        <p>
         <p><AccordionExampleStyled /></p>
          <p>List of all migrations </p>
          <p>{this.props.renderMigrations}</p>

        </p>
       </center>
      </div>
    );
  }
  };
  

export default App;

Answer 1

让我们渲染App ，在组件挂载之前， return语句将元素注入 DOM 树，此时需要调用this.props.renderMigrations函数。

现在，在renderMigrations它使用this.props.migrations

此时的this.props.migrations值是this.props.migrations （在组件挂载之前）？

这个值可能是未定义的，或者是一个数组，这取决于await factory.methods.getMigrations().call()语句及其结果。

因此，不要在不知道其内容的情况下渲染migrations ：

class App extends React.Component {

  static async getInitialProps() {
   const migrations = await factory.methods.getMigrations().call();

    return { migrations };
  }
 
   renderMigrations(){
   const items = this.props.migrations.map((migrations) => {return{migrations}});
    return <li>{items}</li>;
} 

  render() {
    const items = this.props.migration;
   
    return (
      
      <div>
      <center>
        <h2>MigrationHelper by DRIVENecosystem</h2>
        <p>
         <p><AccordionExampleStyled /></p>
          <p>List of all migrations </p>
          <p>
             {
               if(items?.length > 0) {
                  return items.map()   // ---> it's not completed yet!!
               }
             }
          </p>
        </p>
       </center>
      </div>
    );
  }
};
 
export default App;

这可以用短路表达式简化：

<p>
  {
    items?.length > 0  && items.map()   
  }
</p>

此外，您可以在renderMigrations函数中移动 items.map() 并在检查renderMigrations的值后调用this.props.migrations ：

// rest of the codes ...
   renderMigrations () {
     return this.props.migrations.map((migration) => <li>{migration}</li>)
   } 

// rest of the codes ...

  <p>
    {
      this.props.migrations?.length > 0  && renderMigrations()   
     }
  </p>