React / TypeError: files.map не является функцией - PullRequest
Новая
       6

React / TypeError: files.map не является функцией

0 голосов
/ 06 февраля 2020

Я пытаюсь загрузить некоторые файлы через <input type="file"> в состояние, чтобы передать его основному компоненту. С кодом ниже я получаю Uncaught TypeError: Cannot read property 'setState' of undefined при попытке обновить состояние с загруженными файлами. 

import React, { Component } from 'react'
import * as RB from 'react-bootstrap'

import Button from 'components/Button/Button'

class uploadMob extends Component {
    constructor(props) {
        super(props)
        this.state = {
            files: [],
        }
    }

    onFilesAdded(files) {
        this.setState((prevState) => ({
            files: prevState.files.concat(files),
        }))
        this.handleUpload()
    }

    handleUpload = (e) => {
        const { pdfUploadToState } = this.props

        debugger
        pdfUploadToState(this.state.files)
        console.log('PUSHED FILE', this.state.files)
    }

    render() {
        const files = this.state.files
        return (
            <RB.Form.Group>
                <div className="upload-btn-wrapper">
                    <div className="Files">
                        {files.map((file, key) => {
                            return (
                                <div key={key} className="Row">
                                    <span className="Filename">
                                        {file.value}
                                    </span>
                                </div>
                            )
                        })}
                    </div>
                    <Button size="sm" variant="light">
                        Dateien hochladen
                    </Button>

                    <input
                        type="file"
                        name="file"
                        id="files"
                        onChange={this.onFilesAdded}
                    />
                </div>
            </RB.Form.Group>
        )
    }
}

export default uploadMob

Я был бы очень признателен за помощь в этом. Это сводит меня с ума ...

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Вам нужно использовать функцию стрелки, чтобы иметь правильное значение this.

setState равно асинхронному , поэтому вам нужно передать функцию this.handleUpload в качестве обратного вызова чтобы обновить файлы после завершения setState.

Из документации :

Второй параметр для setState () является необязательной функцией обратного вызова это будет выполнено, как только setState будет завершен, и компонент будет перерисован. Обычно мы рекомендуем использовать componentDidUpdate () для таких логи c. 

onFilesAdded = files => {
    this.setState(prevState => ({
        files: [...prevState.files, ...files]
    }), this.handleUpdload)
}
0 голосов
/ 06 февраля 2020

Проблема с этой строкой: 

onFilesAdded(files) {

Вам нужно либо bind(), либо this, например: 

constructor(props) {
    super(props)
    this.state = {
        files: [],
    };

    this.onFilesAdded = this.onFilesAdded.bind(this);
}

или преобразовать его в функцию со стрелкой: 

onFilesAdded = files => {

Проблема в том, что this, указанный внутри onFilesAdded, не указывает на экземпляр компонента по умолчанию. Используя два вышеописанных метода, мы гарантируем, что, вызывая this., компонент будет указан правильно.

...