this.state.file.name不作为react元素呈现

我有一个 setState 的拖放字段(称为 react-dropzone ) .

我希望 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;

谢谢!

编辑:答案是我试图将一个完整的数组传递给一个未设置为数组的值 . 在这种情况下,我需要将单个元素(文件名)从文件数组传递到状态 .

回答(2)

2 years ago

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

沙箱演示有助于imo

2 years ago

onDrop返回一组已接受的文件 .

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

Docs