Question

我正在尝试将用户上传的图像的URL放入数组中，然后在视图中显示该图像。使用我的代码，我在控制台中得到的只是一个空的[]。为什么没有图像URL进入数组，然后在我的视图中显示该图像？

JS状态和功能

this.state = {
            selectedFile: null,
            previewImgURL: '',
            pictures: []
        };
        this.imageUpload = this.imageUpload.bind(this);
}

imageUpload(e) {
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                previewImgURL: reader.result,
                pictures: [...this.state.previewImgURL, this.state.previewImgURL]
            });
        };

        if (file) reader.readAsDataURL(file); // Allows user to preview image uploaded

        this.setState(() => ({file}));
        console.log(this.state.pictures); // in console, all I get's an empty []
    }

JSX代码：

    <div className="inputWrapper">
                    <input
                        id="new_post_image"
                        name="post_image"
                        className="button is-success is-outlined"
                        type="file"
                        style={{display: 'none'}}
                        onChange={this.imageUpload}
                        accept="image/*"
                    />
                    <label className="button is-success is-outlined" htmlFor="new_post_image">Upload</label>
                </div>

                {
                    this.state.pictures.map(key => (
                        <div className="uploaded-pics">
                            <Feed src={this.state.previewImgURL[key]} key={key} />
                        </div>
                    ))
                }
</div>

这是Feed.js：

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

const feed = (props) => {
    return (
        <div className="row">
            <div className="col-md-6 col-sm-6">
                <img src={props.src}/>

            </div>
        </div>
    );
};

export default feed;

Answer 1

我认为问题出在实际将图片添加到状态的行中。this.setState({ selectedFile: file, previewImgURL: reader.result, ----> pictures: [...this.state.previewImgURL, this.state.previewImgURL] });

使用散布运算符时，实际上还没有this.state，因此this.state.previewImgURL尚不存在。

我会尝试：

this.setState({
  selectedFile: file,
  previewImgURL: reader.result,
  pictures: [reader.result]
});

我也不确定在该上下文中是否使用...（扩展）语法。如果您只想更新状态的图片部分（假设您已经具有状态），则可以将其用作：

this.setState({
  ...this.state,
  pictures: [reader.result]
});

值得注意的另一件事是，您正在回调中更新状态，因此在您调用console.log(this.state.pictures)

时不能保证填充该状态。

此外，您处于同一周期内，因此您的状态尚未更新。

要进行额外的调试，请将某种调试器放在Chrome DevTools中的控制台类型this.state.picture中。这将显示状态的图片部分，在调试器中，您还可以单步执行程序。请转到此处以获取有关DevTools调试的更多信息：https://developers.google.com/web/tools/chrome-devtools/javascript/

Answer 2

快速阅读React Documentation of setState。

如果console.log(this.state)紧接setState之后，则您仍处于旧循环中，而状态仍然是旧值。

状态更改后，render被触发，如果您在此处登录this.state，将能够看到更新后的状态。

立即访问更新状态的另一种方法是使用回调作为setState的第二个参数：

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                previewImgURL: reader.result,
                pictures: [...this.state.previewImgURL, this.state.previewImgURL]
            }, () => {
                console.log(this.state.pictures) // this should show you the latest state
            });
        };

为什么不将URL放置在状态数组中？

2 个答案: