react-lightbox-gallery 和 simple-react-lightbox 无法正常工作答案

【问题标题】：react-lightbox-gallery and simple-react-lightbox are not working properlyreact-lightbox-gallery 和 simple-react-lightbox 无法正常工作
【发布时间】：2021-09-27 07:43:14
【问题描述】：

我试图在我的 react 项目中创建一个自适应画廊，当我点击它时，它也有一个灯箱，我尝试使用 react-lightbox-gallery，当我插入时它工作但不完全src: "" 手动很好，当我试图推入一个对象数组并传递到他们没有出现的画廊组件时，他们出现的唯一方法是当我手动传递第一个对象然后推送其他。在这种情况下，如果我单击唯一呈现的然后关闭灯箱将呈现其他推送的丢失图像。

然后我尝试更改为 simple-react-lightbox，它甚至不会出现在 DOM 中，它只是一个空的 div。

更新：除非我更改视口大小，否则组件不会加载。

https://streamable.com/asibpx

问题的视频。

代码如下：

import React, { Component } from 'react'

import { SRLWrapper } from "simple-react-lightbox";

import axios from 'axios';

export default class Gallery extends Component {

    render() {

        var images = [];

        axios.get("http://localhost:80/api/main.php").then(res => {

            res.data.forEach(element => {

                images.push({

                    src: "http://" + window.location.hostname + '/media/images/andes/' + element,
                    caption: 'Lorem ipsum dolor sit amet',
                    width: 'auto',
                    height: 'auto'

                });

            });

        }).catch(error => console.log(error));

        console.log(images);

        return (

            <div>

                <SRLWrapper elements={images} />

            </div>

        );

    }
}

这里是 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import SimpleReactLightbox from 'simple-react-lightbox';

import {
  BrowserRouter as Router
} from "react-router-dom";

import 'bootstrap/dist/css/bootstrap.min.css';
import './customCss/custom.css';

ReactDOM.render(
  <Router>
    <React.StrictMode>
      <SimpleReactLightbox>
        <App />
      </SimpleReactLightbox>
    </React.StrictMode>
  </Router>,
  document.getElementById('root')
);

【问题讨论】：

标签： javascript reactjs rendering gallery lightbox

【解决方案1】：

已解决

我需要使用 setState 而不是直接推送变量，由于某种原因它们无法单独读取，并且由于某些其他原因更改视口会使它们可读...

【讨论】：