javascript - ReactJS - 关于在 Lightbox 组件中插入动态内容的问题

Question

我有这个 React 组件。它正在成功运行。

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

但我想通过使用 Axios 从 json.db 获取数据来动态插入图像。我该怎么做？

这是我的 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

没有任何错误消息，当我检查 react 开发工具时，会渲染一个像这样的空白图像:

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

Answer 1

Map 返回一个数组，并且您将返回的数组包装在另一个数组中，这会导致此行为

更新至

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