使用 map function ReactJS 顯示為未定義的鏈接

Question

嗨，我是新手，如果我錯過了明顯的事情，請提前做出反應。 我在使用 map function 時從 json 返回鏈接時遇到問題。 我一直在嘗試使用 map function 來返回 json 文件中的幾個鏈接，但我似乎做錯了什么。 我想通過數組“Images”來 go 並獲取每個鏈接並在控制台中打印它（現在。我稍后將使用它來顯示圖像）。 這是使用以下代碼的結果： [.[Using file.images.src][1]][1] 如果我執行 file:images 它會返回這個。 [![Using 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 function 調用。 您必須返回 JSX 元素（如div ）或null 。

我還注意到您正在嘗試記錄不存在的images.src 。 images是一個對象數組，每個對象都包含一個src屬性，因此您需要分別對該數組進行 map 並記錄每個值，如果您希望為每個值單獨記錄。 請參閱下面的示例。

如果您不想渲染任何內容而只查看日志，您可以先登錄，然后像這樣返回 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;