this.state.file.name не отображается как элемент реагирования

Question

У меня есть поле перетаскивания (называемое 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;

Спасибо!

РЕДАКТИРОВАТЬ: Ответ в том, что я пытался передать полный массив в значение, не настроенное для принятиямассив.В этом случае мне нужно было передать один элемент (имя файла) из массива файлов в состояние.

Answer 1

Это может быть не ответ, и я не знаю, вставил ли ты весь код, но закрывающий тег отсутствует в компоненте Dropzone.

Демонстрация песочницы помогла бы imo

Answer 2

onDrop возвращает массив принятых файлов.

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

Документы