Javascript 图像数组仅显示一次

我确信works很棒没有什么问题，当我删除文件时，我的控制台中会显示数组：

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} />
   )}
)
}

但仅显示最后一个文件。我的迭代是否正确

编辑：

---

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

正如注释中所建议的，我认为您需要在

映射

函数中使用

return

语句。

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>
  );
}

render（）{
var attachedFiles=this.state.files；
var imagesNodes=attachedFiles.map（（文件，idx）=>{
返回；
});
返回(
{imagesNodes}
);
}

确保在映射数组时返回元素。@JanKlimo您好。但你的确切意思是什么？谢谢。我确实记得这样做过，但文件状态仍然只显示一个数组<代码>文件：数组[1]可能是软件包有错误？听起来不错。

文件

数组应包含您删除的所有文件。因此，如果去掉两个，那么这个数组的长度应该是2。看看这个数组里面有什么。我看到

>0:File{…}

当我试图扩展它时，我得到了

未捕获类型错误：非法调用

这是当我删除两个文件时。这是chrome的React插件。但chrome控制台仍然显示长度，如我所见。我意识到在

渲染中需要父节点。想知道这是否也会引起问题？请参阅我对答案的最新编辑。你好，Jan。我认为该软件包存在漏洞。我仍然有同样的问题。还是一个数组。
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>
  );
}