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

Question

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

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

我究竟做错了什么？

内部主要组件

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

内部进纸组件

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

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

export default feed;

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

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