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

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>
);


export default LightBoxTest

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

Вот мой json.db:

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

Я пытался сделать это так, и это не сработало:

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 {
  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

Появляется сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'interiorsPhotos' из null

Answer 1

Переменная состояния не существует при создании компонента.Объявите это в конструкторе класса.

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