Question

我有这样的问题。我是新来的东西。我已经开发了一个智能合约并已进行了部署，现在我正尝试通过React Web应用程序与之交互。

这是我与智能合约进行交互的代码。

import React, { Component } from 'react';
import Layout from '../components/Layout';
import Header from '../components/Header';
import { Card, Button } from 'semantic-ui-react';

import factory from '../ethereum/factory';


class Drivers extends Component{

    async componentDidMount(){

        const drivers = await factory.methods.getDeployedDriverContracts().call();

        // console.log(drivers);

        return { drivers: drivers};

    }

    renderDriver(){
        const items = this.props.drivers.map(address=>{
            return{
                header: address,
                description: "yeahh",
                fluid: true
            }
        })

        return <Card.Group items={items}></Card.Group>
    }

    render(){

        return(
            <div>
                <Header/>
                <Layout>
                    {this.renderDriver()}
                </Layout>
            </div>
        );
    }


}


export default Drivers;

这是我的合同

pragma solidity ^0.4.17;

contract Driverfactory{

    struct Driver {
        address contractd;
        address account;
    }

    address[] private deployedDriverContracts;

    mapping(address=>Driver) public drivers;

    function createDriver(string lisenceId,string firstName,string lastName,string vehicle,string vehicleType) public{
        require(msg.sender!=drivers[msg.sender].account);
        address newDriver = new DriverProfile(lisenceId,firstName,lastName,vehicle,vehicleType,msg.sender);
        deployedDriverContracts.push(newDriver);
        Driver  memory newDriver1 = Driver({
            contractd:newDriver,
            account:msg.sender
        });
        drivers[msg.sender] = newDriver1;
    }

    function getDeployedDriverContracts() public view returns(address[]){
        return deployedDriverContracts; 
    }

    function checkDriver(address driver) public view returns(bool){
        if(driver==drivers[driver].account){
            return true;
        }

        else{
            return false;
        }

    }

    function driverContract(address driver) public view returns(address){
        address dc_adrs =drivers[driver].contractd;
        return dc_adrs;
    }



}



contract DriverProfile{
    struct Driver{
        string lisenceId;
        string firstName ;
        string lastName; 
        address account;
        string vehicle;
        string vehicleType;
        uint totalOffenceAmount;
        uint offenceCount;
        uint pendingPayments;
        mapping(uint=>Fine)  fines;
    }

    Driver public driver;

    constructor(string lisenceId,string firstName,string lastName,string vehicle,string vehicleType,address owner) public{
        driver = Driver({
            lisenceId:lisenceId,
            lastName:lastName,
            firstName:firstName,
            account:owner,
            vehicle:vehicle,
            vehicleType:vehicleType,
            totalOffenceAmount:0,
            offenceCount:0,
            pendingPayments:0
        });
    }





}

当我打开浏览器并进入该页面时，它给我这样的错误。

TypeError: Cannot read property 'map' of undefined
Drivers.renderDriver
C:/Users/tharindusa/Desktop/TrafficFine/trafficfine/src/components/Drivers.js:22
  19 |    }
  20 | 
  21 |    renderDriver(){
> 22 |        const items = this.props.drivers.map(address=>{
  23 |            return{
  24 |                header: address,
  25 |                description: "yeahh",

有人可以帮助我解决此问题吗？谢谢！！

Answer 1

您需要使用state作为未提供drivers作为props的功能。做这样的事情。

import React, { Component } from 'react';
import Layout from '../components/Layout';
import Header from '../components/Header';
import { Card, Button } from 'semantic-ui-react';

import factory from '../ethereum/factory';


class Drivers extends Component{

    //Initial state empty drivers array
    this.state = {
        drivers : [] 
    }

    async componentDidMount(){
        const drivers = await factory.methods.getDeployedDriverContracts().call();
        // set state
        this.setState({drivers});
    }

    renderDriver = () => {
        //Use drivers from state
        const items = this.state.drivers.map(address=>{
            return{
                header: address,
                description: "yeahh",
                fluid: true
            }
        })

        return <Card.Group items={items}></Card.Group>
    }

    render(){

        return(
            <div>
                <Header/>
                <Layout>
                    {this.renderDriver()}
                </Layout>
            </div>
        );
    }


}


export default Drivers;

此article将帮助您阐明概念。

在React中显示一组项目无法正常工作

1 个答案: