Почему при попытке загрузки другого файла this.setState is not a function?

Question

[Steve Gorton]

Если загружаю первый файл - ок, когда хочу выбрать другой файл this.setState is not a function?

import React from 'react'
import Router from 'next/router'
import Link from 'next/link'
import Layout from '../../components/layout'
import Session from '../../utils/session'

export default class extends React.Component {

    static async getInitialProps({req, res}) {
        
        let props = {
            session: '',
            title: 'Upload check'
        }

        if(req && req.session) {
            props.session = req.session
        } else {
            props.session = await Session.getSession()
        }

        if(!props.session || !props.session.loggedin) {
            if(req) {
                res.redirect('/login')
            } else {
                Router.push('/login')
            }
        }

        return props
    }

    constructor(props) {
        super(props)
        
        this.state = {
            checkImg: '',
            message: null,
            messageStyle: null
        }

        this.onFileChange = this.onFileChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }

    onFileChange(event) {
        this.setState({
            checkImg: event.target.files[0]
        })
    }

    onSubmit(event) {
        event.preventDefault()

        this.setState({
            message: null,
            messageStyle: null
        })

        const formData = new FormData()
        formData.append('checkImg', this.state.checkImg)

        fetch('/upload/check', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(response => {
            if(response.status === 200) {
                this.setState = {
                    message: 'Check successfully uploaded',
                    messageStyle: 'alert-success'
                }
            } else {
                this.setState = {
                    message: response.message,
                    messageStyle: 'alert-danger'
                }
            }
            console.log(this.state)
        })
    }

    render() {

        if(this.props.session.loggedin) {
            return (
                <Layout {...this.props}>
                    <div className="container">
                        <div className="row">
                            <form onSubmit={this.onSubmit}>
                                <div className="form-group">
                                    <input type="file" onChange={this.onFileChange} />
                                </div>
                                <div className="form-group">
                                    <button className="btn btn-primary" type="submit">Upload</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </Layout>
            )
        } else {
            return (
                <Layout {...this.props}>
                    <div />
                </Layout>
            )
        }
    }

}

Answer 1

[LinkVP]

Измените обычную функцию:

onFileChange(event) {
        this.setState({
            checkImg: event.target.files[0]
        })
    }

На стрелочную:

onFileChange = (event) => {
        this.setState({
            checkImg: event.target.files[0]
        })
    }

Comments

[Steve Gorton]

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