為什么我不能用用戶的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

在這里，我假設這是針對單個用戶的。 就像我在評論中說的那樣，如果您希望跨不同的用戶使用它，則必須使用數據庫之類的東西來存儲到數據庫的鏈接，並使用一種方法來檢索它。