javascript - ReactJS 照片库使用来自 Express 数据库的一组 url？

Question

又是我.. 我有点卡住了(使用 ReactJS 前端和 nodeJS 后端)。我想使用照片库组件“react-photo-gallery”(看起来像这个 https://codesandbox.io/s/o7o241q09?from-embed)

但是我有一个问题，我使用的是 express 数据库，当我在我的网站上载图片时，我已经设法获取了 img url。我现在有一个名为“urlimages”的表，其中包含“urlimage”列。但这就是问题所在，该组件使用具有以下结构的数组:[{src, width, height}, {src, width height}, etc]。我想把我的网址一个一个地放在 src 中。那可行吗？

这是我的代码

import React from 'react';
import { render } from 'react-dom';
import Gallery from 'react-photo-gallery';
import Photo from './Photo';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';


const SortablePhoto = SortableElement(Photo);
const SortableGallery = SortableContainer(({photos}) => {
  return <Gallery photos={photos} ImageComponent={SortablePhoto}/>
});

class PhotoGallery extends React.Component {
  constructor(){
    super();
    this.onSortEnd = this.onSortEnd.bind(this);
    this.state = {
      photos: photos,
      urlImages: []
    };
  }
  async componentDidMount() {
    const response = await fetch('http://localhost:3004/getUrlImages');
    const newList = await response.json();
    this.setState(previousState => ({
      ...previousState,
      urlImages: newList,
     }));
  }
  onSortEnd ({ oldIndex, newIndex }) {
    this.setState({
      photos: arrayMove(this.state.photos, oldIndex, newIndex),
    });
  }
  render() {
    return (
      <SortableGallery axis={"xy"} photos={this.state.photos} onSortEnd={this.onSortEnd} />
    )
  }
}
const photos = [
  {
    src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599",
    width: 3,
    height: 3
  },
  {
    src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
    width: 1,
    height: 1
  },
  {
    src: "https://source.unsplash.com/qDkso9nvCg0/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/iecJiKe_RNg/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/epcsn8Ed8kY/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/NQSWvyVRIJk/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/zh7GEuORbUw/600x799",
    width: 3,
    height: 4
  },
  {
    src: "https://source.unsplash.com/PpOHJezOalU/800x599",
    width: 4,
    height: 3
  },
  {
    src: "https://source.unsplash.com/I1ASdgphUH4/800x599",
    width: 4,
    height: 3
  }
];
export default PhotoGallery;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如您所见，我可以通过提取从后端成功获取 url 数据。但是我将如何管理将每个链接放入一个数组中？我想我必须使用一些映射，但我找不到如何做到这一点。任何人都可以帮助初学者吗？ :)

提前致谢

Answer 1

如果我没理解错的话，你想将你的响应
[src, src, ...] 转换为 [{src, width, height}, {src,宽度, 高度}, ...]

没什么大不了的，您需要将 map() 函数应用于您的 this.state.urlImages 数组。例如，您可以定义一个函数来为您执行此操作:

galleryPhotos() {
   if(this.state.urlImages) {
      return this.state.urlImages.map(function(urlImage) {
         return { src: urlImage, width: YOUR_WIDTH, height: YOUR_HEIGHT }
      })
   }
}

并将其作为 photos 属性传递给您的 SortableGallery 组件。

<SortableGallery axis={"xy"} photos={this.galleryPhotos()} onSortEnd={this.onSortEnd} />

注意:请记住，如果您还没有指定 height 和 width 属性，您仍然需要一种方法对于每张图片。

更新:

@Mich 的响应数据是一个对象数组(每个对象都有一个“urlimage”属性)，因此 galleryPhotos() 函数的最后一个返回语句应该如下所示:

return { src: urlImage.urlimage, width: YOUR_WIDTH, height: YOUR_HEIGHT }