this.state.file.name 不呈现为反应元素

Question

我有一个拖放字段（称为 react-dropzone）setState of a file。

我希望 file.name 在浏览器中呈现。

经过测试，它没有产生任何错误或结果。我可以让其他状态以正常方式呈现。有什么建议吗？

代码：

class Home extends Component {
state = {
fileName: {}
};

handleOnDrop = file => {
this.setState({ file });   
};

render() {
return (
<div>
<Dropzone onDrop={this.handleOnDrop} </Dropzone>

<h3>{this.state.file.name}</h3>

</div>
);}}

export default Home;

谢谢！

编辑：答案是我试图将一个完整数组传递给一个未设置为获取数组的值。在这种情况下，我需要将单个元素（文件名）从文件数组传递到状态。

Answer 1

onDrop returns 接受文件的数组。

handleOnDrop: (acceptedFiles) => {
  acceptedFiles.forEach(file => {
    console.log(file.name);
  })
}

Docs

Answer 2

这可能不是答案，我不知道您是否粘贴了整个代码，但是您的 Dropzone 组件中缺少结束标记。

沙盒演示对我有帮助

this.state.file.name 不呈现为反应元素

this.state.file.name not rendering as a react element

state

render

reactjs