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

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;

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

附：我是 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

问题

migrations 在第一次渲染中不存在。所以通过它映射，导致错误。

解决方案

只需要在映射之前检查migrations的数据是否已经到达并且有内容：

class App extends React.Component {

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

    return { migrations };
  }
 
   const renderMigrations = () => {
     return this.props.migrations.map((migration) => {
        return(
           <div>
             <li>{migration.name}</li>)
             <p>{migration.detail}</li>)
           </div>
        )
      })
   } 

  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>
             {
               items?.length > 0 && renderMigrations
             }
          </p>
        </p>
       </center>
      </div>
    );
  }
};
 
export default App;

在renderMigrations 方法中，我使用e 示例显示li 和p 元素的migration 详细信息，因为您的问题中不存在migrations 数组，我只是举个例子。您应该根据应用程序中的要求进行更改。