Question

我想用URL填充数组，但还要一一显示这些URL。例如，一个用户上来，上传了一个文件，它被存储在数组中并显示出来。下一个用户出现，上传文件，将其存储在数组中并显示，等等。

本质上，我只希望能够在numeros[i]组件中动态创建<img/>标签，以使用户联机并上传文件，然后将其放入数组中。

我在做什么错了？

内部主要组件

<Feed/>

内部Feed组件

this.state = {
   pictures: [],
   previewImgURL: ''
};

displayImage() {
    let pictures = this.state.pictures;
    let previewImgURL = this.state.previewImgURL;
    this.setState({pictures: [...previewImgURL, previewImgURL]});
    console.log(pictures);
    return <Feed src={pictures}/>;
};

render() {
   return(
      <div className="uploaded-pics">
        {this.displayImage()}
      </div>
   );
}

Answer 1

至少Feed应该在pictures数组上进行迭代

import React from 'react';
import './Feed.scss';

const feed = (props) => {
    return(
        <div className="parent">
            {props.src.map(item => 
                <img src={item} className="img-fluid" alt=""/>
            )}
        </div>
    );
};

export default feed;

此行

this.setState({pictures: [...previewImgURL, previewImgURL]});

大概应该是这样

this.setState({pictures: [...pictures, previewImgURL]});

Answer 2

查看此代码是否有帮助。我已经使用react钩子简化了事情，也使用了一些ES6的东西，例如胖箭头功能。除了使用图片上传外，我还使用了带有“添加”按钮的简单输入文本（仅用于模拟）

https://codesandbox.io/s/frosty-microservice-2nev1

在这里，我假设这是针对单个用户的。正如我在评论中说的那样，如果您希望跨不同的用户使用它，则必须使用数据库之类的东西来存储到数据库的链接，并使用一种方法来检索它。

为什么我不能用用户的URL填充数组？

2 个答案: