在 React 中从 api（Django Rest 框架）响应中渲染图像数组时遇到问题

Question

您好，这是我在 React 和 Django Rest Framework 中的第一个项目，我需要弄清楚这一点才能完成该项目。 我遇到的问题（我相信这是一个 React 问题）是我的 api 正在返回一个 json 响应，React 使用 axios 接收该响应，这工作正常，因为当我执行控制台日志时，所有数据都在那里，我也能够通过数据到标签，

等。我想显示 api 发送到的照片。该链接不是问题，因为我可以使用 api 提供的链接在浏览器中查看照片。问题是我在 api 响应中有多个图像，这些图像设置为数组。 如此处所示： postmanResponse

使用控制台响应： enter image description here

我想基本上我要问的是有没有一种方法可以使用我的 api 提供的图像数组创建一个数组/对象，以便我可以使用它在 React 中显示图片？ 任何帮助都会有所帮助。谢谢！

这是我在 React 方面的代码：

// Import Files
import React, { Component } from 'react';
// Import Axios
import axios from "axios";
// Import Is Mobile 
import { isMobile } from 'react-device-detect';
// Import Css
import "./projectDetail.css";
// Mobile Css
import "./projectDetailM.css"
// Lightbox
import { SRLWrapper } from "simple-react-lightbox";
// Import Footer
import Footer from "../Footer/footer"


// Project Detail Class
class ProjectDetail extends Component {



// States 
state = {
    data: [],
    photoIndex: 0,
    isOpen: false,
}

// Mount Data to the State 
componentDidMount() {
    this.handleFetchItem();
}


// Get the project via axios
handleFetchItem = () => {
    // Variables
    const {
        match: { params }
    } = this.props
    // Set State
    this.setState({ loading: true });
    // Axios Setup
    axios.get('http://127.0.0.1:8000/projects/' + params.ID)
        .then(res => {
            this.setState({ data: res.data, loading: false });
        })
        .catch(console.error());
}

    // Render the page 
    render() {

        // Const 
        const { data } = this.state;
        const project = data;
        // Print to console (Debugging)
        //console.log(data);
        // Return Page
        return (
            <div className="projectDetailMainContainer">
                <div className="projectDetailGrid">
                    <div className="projectDetailArea">
                        <div className="projectNameArea">
                            <h1 className="projectNameStyling">
                                {project.title}
                            </h1>
                        </div>
                        <div className="projectAddress1Area">
                            <h2 className="projectAddress1Styling">
                                {project.address},
                                    </h2>
                        </div>
                        <div className="projectAddress2Area">
                            <h2 className="projectAddress2Styling">
                                {project.address2}
                            </h2>
                        </div>
                        <div className="projectCityArea">
                            <h2 className="projectCityStyling">
                                {project.city} {project.zipcode}
                            </h2>
                        </div>
                        <div className="projectProgressArea">
                            <h3 className="projectProgressStyling">
                                {project.completed}
                            </h3>
                        </div>
                        <div className="projectReturnButton">
                            <button
                                className="btnStyleDetailPage"
                                type="button"
                                onClick={() => { this.props.history.replace('/projects') }}>
                                Return to Project List
                                    </button>
                        </div>
                    </div>
                    <div className="projectDetailImageArea">
                        <SRLWrapper>
                            <img className="projectImageStyling"
                                src={require("./placeholders/city.jpg")} alt={project.title} />
                        </SRLWrapper>
                    </div>
                </div>
                <Footer />
            </div>
        );
    }
}


// Export Compoenent
export default ProjectDetail;

Answer 1

您可以通过实现图像轮播或遍历图像数组来解决此问题。

首先你必须保证图片正确设置在一个状态（不管是什么类型的组件）。然后，这是显示所有图像并解决问题的一种方法：

function ImageList(props) {  
  return (
    props.images.map((pic, index) => {
      return (
        <img key={index} src={pic.src} alt="image" />
      );
    })
  );
}

Answer 2

像这样使用地图

 { data.map(project => { <div className="projectDetailMainContainer">
                <div className="projectDetailGrid">
                    <div className="projectDetailArea">
                        <div className="projectNameArea">
                            <h1 className="projectNameStyling">
                                {project.title}
                            </h1>
                        </div>
                        <div className="projectAddress1Area">
                            <h2 className="projectAddress1Styling">
                                {project.address},
                                    </h2>
                        </div>
                        <div className="projectAddress2Area">
                            <h2 className="projectAddress2Styling">
                                {project.address2}
                            </h2>
                        </div>
                        <div className="projectCityArea">
                            <h2 className="projectCityStyling">
                                {project.city} {project.zipcode}
                            </h2>
                        </div>
                        <div className="projectProgressArea">
                            <h3 className="projectProgressStyling">
                                {project.completed}
                            </h3>
                        </div>
                        <div className="projectReturnButton">
                            <button
                                className="btnStyleDetailPage"
                                type="button"
                                onClick={() => { this.props.history.replace('/projects') }}>
                                Return to Project List
                                    </button>
                        </div>
                    </div>
                    <div className="projectDetailImageArea">
                        <SRLWrapper>
                            <img className="projectImageStyling"
                                src={require("./placeholders/city.jpg")} 
                                alt={project.title} />
                        </SRLWrapper>
                    </div>
                </div>
                <Footer />
            </div>
})}

对于图像，您可以像这样通过索引访问它们

{project.images[0].src}
{project.images[1].src}
{project.images[2].src}

示例：

<img src={project.images[0].src} alt="image" />