ReactJS - вопрос о вставке динамического содержимого в компонент лайтбокса

Question

У меня есть этот React Component.Он работает успешно.

import React, { Component } from 'react'    
import Lightbox from 'react-lightbox-component';    

const LightBoxTest = () => (

  <div>

    <Lightbox images={[
      {
        src: '../images/int_01.jpg'       
      },
      {
        src: '../images/int_02.jpg'
      },
      {
        src: '../images/int_03.jpg'        
      }
    ]} />
  </div>
);

Но я хочу динамически вставлять изображения, извлекая данные из json.db с помощью Axios.Как я могу это сделать?

Вот мой json.db:

{  
  "interiors": [
    {      
      "photos": [      
        "int_01",
        "int_02",
        "int_03" 
    }
  ]
}

Я пытался сделать это, но это не сработало.Axios успешно извлекает данные, но не отображает их на экране.

import React, { Component } from 'react'
import axios from 'axios'  
import Lightbox from 'react-lightbox-component';


const URL_INTERIORS = 'http://localhost:3001/interiors';


class LightBoxTest extends Component {


  constructor(props) {
    super(props);
    this.state = {
      interiors: [],
      interiorsPhotos: []
    }
  }

  componentDidMount() {
    axios.get(URL_INTERIORS)
      .then(res => {
        this.setState({
          interiors: res.data[0],
          interiorsPhotos: res.data[0].photos,             
      })
  }
  render() {
    return (
      <div>    
        <Lightbox images={[
          this.state.interiorsPhotos.map((photo, index) => {
            {
              src: `../images/${photo}.jpg`      
            }
          })
        ]} />

      </div>
    )
  }
}

export default LightBoxTest

Нет сообщения об ошибке, и когда я проверяю инструмент реагировать на устройство, отображается одно пустое изображение, подобное этому:

<img key="0" className="lightbox-img-thumbnail"></img>

Answer 1

Map возвращает массив, и вы оборачиваете возвращенный массив в другой массив, что приводит к этому behvaiour

Обновление до

 <Lightbox images={
      this.state.interiorsPhotos.map((photo, index) => {
        return {
          src: `../images/${photo}.jpg`      
        }
      })
    } />

будет работать

Чтобы сделать его болеечисто вы могли бы написать это как

render() {
    const images = this.state.interiorsPhotos.map((photo, index) => {
           return  {
              src: `../images/${photo}.jpg`      
            }
          })
    return (
      <div>    
        <Lightbox images={images} />
      </div>
    )
  }