反应dropzone图像不显示在模板上(React dropzone image not shown on template)

我已经使用了反应dropzone组件来进行多个图片上传，但图片预览未显示在我的模板上。文件显示在控制台上。我在哪里做错了？ 我在这里使用了这个组件https://github.com/okonet/react-dropzone 。 让我知道还有什么我必须提供用细齿梳来检查这个问题。 提前感谢您的帮助。 您的帮助将不胜感激。

代码是

var Gallery = React.createClass({ getInitialState: function () { return { files:[] }; }, onDrop(files) { console.log('Received files: ', files); this.setState({ files: files }); }, showFiles() { var files = this.state; console.log('files',files); if (!files.length) { return null; } return ( <div> <h3>Dropped files: </h3> <ul className="col-md-4"> { files.map((file, idx) => { return ( <li key={idx}> <img src={file.preview} width={100}/> <div>{file.name + ' : ' + file.size + ' bytes.'}</div> </li> ); }) } </ul> </div> ); }, render: function () { return ( <div> <div className="col-md-12"> <Dropzone onDrop={this.onDrop}> Try dropping some files here, or click to select files to upload. </Dropzone> {this.showFiles()} </div> <div className="row"> <button className="btn" onClick={this.submit}>Next</button> </div> </div> ); }, });

I have used react dropzone component for multiple image upload but the image preview is not shown on my template.Files are shown on console.Where have i done wrong? I have used this component from here https://github.com/okonet/react-dropzone . let me know what else i have to provide to examine this issue with fine-tooth comb. Thanks for help in advance. Your help will be appreciated.

The code is

var Gallery = React.createClass({ getInitialState: function () { return { files:[] }; }, onDrop(files) { console.log('Received files: ', files); this.setState({ files: files }); }, showFiles() { var files = this.state; console.log('files',files); if (!files.length) { return null; } return ( <div> <h3>Dropped files: </h3> <ul className="col-md-4"> { files.map((file, idx) => { return ( <li key={idx}> <img src={file.preview} width={100}/> <div>{file.name + ' : ' + file.size + ' bytes.'}</div> </li> ); }) } </ul> </div> ); }, render: function () { return ( <div> <div className="col-md-12"> <Dropzone onDrop={this.onDrop}> Try dropping some files here, or click to select files to upload. </Dropzone> {this.showFiles()} </div> <div className="row"> <button className="btn" onClick={this.submit}>Next</button> </div> </div> ); }, });

最满意答案

问题出在showFiles方法中。

var files = this.state; //const {files}=this.state

您不要将文件分配给文件var，而是分配整个状态。

我设法通过这样做解决了这个问题

var files = this.state.files || null;

The problem is in the showFiles method.

var files = this.state; //const {files}=this.state

you don't assign the files to the file var, but the whole state.

i managed to solve the problem by doing this

var files = this.state.files || null;

更多推荐