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

【问题标题】：this.state.file.name not rendering as a react elementthis.state.file.name 不呈现为反应元素
【发布时间】：2019-05-11 05:42:55
【问题描述】：

我有一个拖放字段（称为react-dropzone），它是setState 的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;

谢谢！

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

【问题讨论】：

codesandbox.io/s/new ，您可以为我们创建一个沙盒演示以便我们进行调试吗？包含整个组件代码。
以下答案已被接受。谢谢

标签： reactjs state render

【解决方案1】：

onDrop 返回一个已接受文件的数组。

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

Docs

【讨论】：

我使用这部分代码，acceptedFiles.forEach(file => { console.log(file.name); })，工作正常。谢谢

【解决方案2】：

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

沙盒演示对 imo 有帮助

【讨论】：

谢谢，但是 dropzone 组件是输入。 onDrop 函数处理输入，h3 标签用于输出。
我的意思是这条线<Dropzone onDrop={this.handleOnDrop} </Dropzone>你正在调用结束</Dropzone>而你有<Dropzone 没有结束>
哦，我明白了。必须在将其输入到stackoverflow时将其删除。谢谢