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

编程问答 2022-11-17

问题描述

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

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

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

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

解决方法

已解决

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

galleryjavascriptreactjsreactjsreactjsreactjsrenderingrendering