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

Question

我试图在我的反应项目中有一个自适应画廊，当点击时也有一个灯箱，我尝试使用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')
);

Answer 1

解决了

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