Question

再次是我..我有点卡住（使用ReactJS前端和nodeJS后端）。我想使用照片库组件“react-photo-gallery”（看起来lilke this https://codesandbox.io/s/o7o241q09?from-embed）

但是我有一个问题，我正在使用快速数据库，当我在我的网站上传图像时，我设法获得了img url。我现在有一个名为“urlimages”的表，其中包含“urlimage”列。但是问题在于，组件使用具有以下结构的数组：[{src，width，height}，{src，width height}等]。我想在src中逐个放置我的URL。那可行吗？

这是我的代码

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>

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

提前致谢

Answer 1

如果我理解正确，您希望将回复转换为[src, src, ...]至[{src, width, height}, {src, width, height}, ...]

没什么大不了的，您需要将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 }
      })
   }
}

并将其作为SortableGallery道具传递给您的photos组件。

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

注意：请注意，如果您尚未为每张图片添加height和width属性，则仍需要这样做。

<强>更新

@ Mich的响应数据是一个对象数组（每个对象的属性为＆＃34; urlimage＆＃34;），因此galleryPhotos()函数的最后一个返回语句应如下所示： BR />

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

ReactJS Photo Gallery使用来自Express数据库的URL数组？

1 个答案: