使用 map function ReactJS 显示为未定义的链接

Question

Hi I'm new in react so sorry in advance if I missed something obvious. I'm having problems with returning links from my json while using the map function. I have been trying to use the map function to return several links that are in an array in json file that I have but I seem to be doing something wrong. I would like to go through the array "Images" and get each link and print it in the console (For now. I will use it later to show the image). Here is the result of using the code below: [.[Using file.images.src][1]][1] If I do file:images it returns this. [![Using file.images][2]][2] (I have no idea why it prints twice) Here is my code

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;

The result I'm looking for is:

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

The json file format is done by django-rest-framework (maybe thats causing it) Thank you for your time:)

Answer 1

You can't return a console.log function call like this. You have to return either a JSX element (like a div ) or null .

I also noticed you're trying to log images.src , which doesn't exist. images is an array of objects, each containing a src property, so you need to map over that array separately and log each value if you want separate logs for each. See my example below.

If you don't want to render anything and just see the logs you can log first and then return null like this:

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

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

Bear in mind this will log to your console on every render.

Answer 2

you can do this

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;