Question

我是React和Firebase的新手，正在从事以太坊应用程序。

我的问题： 此代码从区块链中检索地址数组，并将其呈现为来自语义UI React的Cards。这些卡接受URL作为属性，我喜欢给每张卡一个单独的图像。这些图像在我的Firebase云存储中存储为“ address” .jpg： Picture of my storage

我的想法：我想将网址存储在状态数组中，并将地址作为键，因此我可以访问卡的image属性中的特定URL。最好的解决方案是什么？我被这段代码所困扰，即时消息只能显示一个图像，因为仅存储一个URL的状态（出于讨厌的原因）。

谢谢！

import React, { Component } from "react";
import { Card } from "semantic-ui-react";
import Layout from "../components/Layout";
import { Link } from "../routes";
import factory from "../ethereum/factory";
import { storage } from "../firebase/index.config";


class CarIndex extends Component {

    state =  {
        images: null
    };

    static async getInitialProps() {
        const rentals = await factory.methods.getDeployedRentals().call();
        return { rentals }
    }

    componentDidMount() {
        const url = this.props.rentals.map( address => {
            storage.ref(`images/${address}.jpg`).getDownloadURL().then( url => {
                console.log(url);
                this.setState({images: url})
            });
        });

    }

    renderRentals() {

        const items = this.props.rentals.map(address => {
            return {
                image: this.state.images,
                header: address,
                    description: (
                        <Link route={`/cars/${address}`}>
                          <a>View Car</a>
                        </Link>
                      ),
                fluid: false,
                style: { overflowWrap: 'break-word' }
            };
        });

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

    render() {
        return(
            <Layout>
                <h2>Cars:</h2>
                {this.renderRentals()}
            </Layout>

        );
    }

}

export default CarIndex

从fireabse下载图像并映射到数组

0 个答案: