Question

我正在研究一个反应项目。我正在尝试实现材料ui的网格列表组件。我有一系列图片网址。我从这个数组中的网格列表中渲染图像。现在我有一个添加按钮，允许我将URL添加到此数组。所以状态if数组更改为添加了url的新数组。我希望我的网格列表也能用旧图像显示新图像。这是我的代码

state = {
        imageURLS: ["https://www.r.te.com/api/v1/frames/c6180ce1-2260-4bed-800f-c2325e6242e0/"]
    };

updateImageURLS(url_array) {
        this.setState({
            imageURLS: url_array     //url_array is the new array with added urls
        })
        this.componentWillUpdate();
    }

<div className="image-grid" style={styles.root}>
                    <GridList style={styles.gridList} cols={3}>
                        {this.state.imageURLS.map((x,i) => (
                            <GridTile
                                key={x}
                                //title={tile.title}
                                //actionIcon={<IconButton><StarBorder color="rgb(0, 188, 212)" /></IconButton>}
                                //titleStyle={styles.titleStyle}
                                //titleBackground="linear-gradient(to top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
                            >
                                <img src={x} />
                            </GridTile>
                        ))}
                    </GridList>
                </div>

每次状态更改时，我的列表都应该向其中添加新图像。我该怎么办？

更新：关于数组的更多信息

我有一个上传表单，在提交时，将图像url（azure blob url）保存在一个数组中。每次上传新图像时，我都会将新图像推送到该数组。现在我在参数中设置数组传递（array_url）是来自那里的数组（用新图像URLS推送），现在我在上面的代码中将imageURLS数组设置为等于array_url。这就是我这样做的方式。我已将代码包含在更新中。

 $.ajax(settings).done((response) => {



            imageURL = response.blob_url; 

            url_array.push(response.blob_url)   //new image url added to array

            that.uploadImage();

        });

  uploadImage() {
        var that = this;
        var uri = submitUri
        console.log(uri);
        var requestBody = '<?xml version="1.0" encoding="utf-8"?><BlockList>';
        $.ajax({
            url: uri,
            processData:false,
            type: "PUT",
            data: selectedFile,
            beforeSend: function (xhr) {
                xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
                //xhr.setRequestHeader('x-ms-blob-content-type', selectedFile.type);
                //xhr.setRequestHeader('Content-Length', requestBody.length);
            },
            success: function (data, status) {
                               fileIndex = fileIndex + 1;
                if(fileIndex==files.length){

                    that.props.updateImageURLS(url_array);    //when all files gets uploaded, call this fuction to update the url array to show iamges 
                }
                else {
                    that.sendURL();
                    that.handleUpload(fileIndex);
                }


            },
            error: function (xhr, desc, err) {
                console.log(desc);
                console.log(err);
            }
        });
    }

现在当我添加网址时，它会显示图片的默认html图标，而不是实际图片。

动态更新网格列表材料ui

0 个答案: