使用地图函数 ReactJS 显示为未定义的链接

Question

嗨，我是新手，如果我错过了一些明显的事情，请提前做出反应。我在使用 map 函数时从我的 json 返回链接时遇到问题。我一直在尝试使用 map 函数来返回我拥有的 json 文件中数组中的几个链接，但我似乎做错了什么。我想通过数组“图像”并获取每个链接并在控制台中打印它（现在。我稍后将使用它来显示图像）。 这是使用以下代码的结果： [![使用 file.images.src][1]][1] 如果我做 file.images 它返回这个： [![使用 file.images][2]][2] （我不知道为什么会打印两次） 这是我的代码

import React, { Component } from 'react';


// Project Detail Class
class ProjectDetail extends Component {

constructor() {
    super();
    this.state = {
        data: [
            {
                "id": 19,
                "title": "Example 1",
                "address": "Example -address",
                "address2": "Example -address",
                "city": "Example City",
                "zipcode": "00000",
                "client": "Example 1 llc",
                "commercial": true,
                "residential": false,
                "completed": "Completed",
                "featured": true,
                "images": [
                    {
                        "src": "http://127.0.0.1:8000/media/images/waves.jpg"
                    },
                    {
                        "src": "http://127.0.0.1:8000/media/images/volcano.jpg"
                    },
                    {
                        "src": "http://127.0.0.1:8000/media/images/city.jpg"
                    }
                ]
            }
        ]
    }
}


// Render the page 
render() {
    return (
        <div>
            {this.state.data.map((file) => {
                return console.log(file.images.src)
                
            }
            )}
        </div>

    );
}
} export default ProjectDetail;

我要找的结果是：

1. http://127.0.0.1:8000/media/images/waves.jpg
2. http://127.0.0.1:8000/media/images/volcano.jpg
3. http://127.0.0.1:8000/media/images/city.jpg

json 文件格式是由 django-rest-framework 完成的（可能是这个原因） 谢谢你的时间:)

Answer 1

你不能return 这样的console.log 函数调用。您必须返回一个 JSX 元素（如 div）或 null。

我还注意到您正在尝试记录 images.src，但它并不存在。 images 是一个对象数组，每个对象都包含一个 src 属性，因此如果您需要单独的日志，则需要单独映射该数组并记录每个值。请参阅下面的示例。

如果你不想渲染任何东西，只看日志，你可以先登录，然后像这样返回 null：

  render() {
    return (
      <div>
        {this.state.data.map((file) => {
          file.images.forEach((image) => console.log(image.src));

          return null;
        })}
      </div>
    );
  }

请记住，这将在每次渲染时记录到您的控制台。

Answer 2

你可以这样做

import React, { Component } from 'react';


// Project Detail Class
class ProjectDetail extends Component {

constructor() {
    super();
    this.state = {
        data: [
            {
                "id": 19,
                "title": "Example 1",
                "address": "Example -address",
                "address2": "Example -address",
                "city": "Example City",
                "zipcode": "00000",
                "client": "Example 1 llc",
                "commercial": true,
                "residential": false,
                "completed": "Completed",
                "featured": true,
                "images": [
                    {
                        "src": "http://127.0.0.1:8000/media/images/waves.jpg"
                    },
                    {
                        "src": "http://127.0.0.1:8000/media/images/volcano.jpg"
                    },
                    {
                        "src": "http://127.0.0.1:8000/media/images/city.jpg"
                    }
                ]
            }
        ]
    }
}


// Render the page 
render() {
    return (
        <div>
            {this.state.data.map((file) => {
                  {file.images.map((images) => {
                  console.log(images.src)
                   return null;
                   })}
               }
            )}
        </div>

    );
}
} export default ProjectDetail;