Question

我确信react-dropzone没有任何问题，并且当我删除文件时，数组显示在我的控制台中：

getInitialState() {
 return{files: []}
},
onDrop(files) {
 this.setState({files: files});
 console.log(files);
},

render(){
 var attachedFiles = this.state.files;
 return(
  {attachedFiles.map((file, idx) =>
    <img key={idx} src={file.preview} />
   )}
)
}

删除两个文件时，在控制台中显示为

>[File]
>[File]

但只显示最后一个文件。我没有正确迭代吗？

编辑：

我注意到我的文件状态只显示一个数组，无论我删除多个文件。

Answer 1

根据评论中的建议，我认为您的return功能需要map声明。您的render函数还需要返回包含在单个父节点中的数据，如：

render(){
  var attachedFiles = this.state.files;
  var imagesNodes = attachedFiles.map((file, idx) => {
    return <img key={idx} src={file.preview} />;
  });

  return (
    <div className="imagesList">
      {imagesNodes}
    </div>
  );
}

图像数组只显示一次

1 个答案: