React Js-有關以動態方式渲染燈箱組件的問題

Question

我安裝了此依賴項：

http://jfcaiceo.github.io/react-lightbox-component/

我正在嘗試以動態方式渲染它，但我無法成功。 也許我在做一些失誤。

這是我的組件：

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

const URL = 'http://localhost:3001/houses';

class Casas extends Component {    
  constructor(props) {
    super(props);
    this.state = {
      index: 0,     
      currentHouse: [],     
      photos: [] 
    };       
  }

  componentDidMount() {
    axios.get(URL)
      .then(res => {
        this.setState({           
          currentHouse: res.data
        })
      })
  }

  render() {
    const { currentHouse, index } = this.state;    

    const images = currentHouse.length && currentHouse[index] && currentHouse[index].photos;

    const renderImages = images && images.map((photo, index) => {   
      return (
          {
            src: `../images/${photo}.jpg`
          }
        )
    })

        <div>
          <div className="gallery">
           <Lightbox images={renderImages} />             
        </div>    
      </div>
    )
  }

}

export default Casas

這是Axios用來獲取的db.json。 可能會渲染“照片”數組。

{
  "houses": [
    {
      "id": 1,
      "name": "some text",
      "text": "some text",
      "photos": [
        "img_1",
        "img_2",
        "img_3"
      ]
    },
    {
      "id": 2,
      "name": "some text",
      "text": "some text",
      "photos": [
        "img_1",
        "img_2",
        "img_3"
      ]
    }
]

有人知道如何解決嗎？

Answer 1

始終期望以下格式的第三方插件react-lightbox-component

 var images = {
  [
    {
      src: 'some image url',
      title: 'image title',
      description: 'image description'
    },
    ...
  ]
} 

所以在您的代碼中render()

1. currentHouse.length為0，因此此行中的var images = houses.length && houses[index] && houses[index].photos; 然后renderImages也為0。

2. react-lightbox-component收到0，因此不會渲染

然后您的應用會引發錯誤並停止。

要使此工作：

1. 您需要檢查currentHouse.length的長度，然后渲染react-lightbox-component

像下面這樣：

 {
     this.state.currentHouse.length > 0  
        ? <Lightbox images={renderImages }/>   
        : null
   } 

演示

Answer 2

您的代碼中有一些語法錯誤。 您必須從currentHouse.houses中獲取圖像，似乎您是直接從currentHouse中獲取圖像。 下面的代碼工作正常。 請看一看：

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

class Casa extends Component {
constructor(props) {
    super(props);
    this.state = {
        index: 0,
        currentHouse: [],
        photos: []
    };
}

componentDidMount() {

    axios.get('books.json')
        .then(res => {
            this.setState({
                currentHouse: res.data
            })
        })
}

render() {
    const {
        currentHouse,
        index
    } = this.state;

    const images = currentHouse.houses && currentHouse.houses.length && currentHouse.houses[index] && currentHouse.houses[index].photos;

    const renderImages = images && images.map((photo, index) => {
        return ({
            src: `../images/${photo}.jpg`
        })
    });
    return (
        <div>
            <div className = "gallery" > {images && <Lightbox images = { 
               renderImages}/> }</div>     
        </div>
        )
    }
}
export default Casa;