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 dev工具时，会呈现一个空白图像，像这样：

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

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

1 个答案: