設置“狀態”時出錯（反應）

Question

當我得到這個錯誤時，我正在做一個小項目來了解更多關於 React 的信息： “Line 19.5: 'state' is not defined no-undef” 。 我不知道出了什么問題......我在另一個項目中使用了相同的結構，我沒有收到錯誤。

import React, { Component } from 'react'
import axios from 'axios'
import Main from '../template/Main'

const headerProps = {
    icon: 'users',
    title: 'Usuários',
    subtitle: 'Cadastro de usuários: Incluir, Listar, Alterar e Excluir'
}

const baseUrl = 'http://localhost:3001/users'
const initalState = {
    user: { name: '', email: '' },
    list: []
}

export default class UserCrud extends Component {

    state = { ...initalState }

    clear() {
        this.setState({ user: initalState.user })
    }

    save() {
        const user = this.state.user
        const method = user.id ? 'put' : 'post'
        const url = user.id ? `${baseUrl}/${user.id}` : baseUrl
        axios[method](url, user)
            .then(resp => {
                const list = this.getUpdatedList(resp.data)
                this.setState({ user: initalState.user, list })
            })
    }

    getUpdatedList(user) {
        const list = this.state.list.filter(u => u.id !== user.id)
        list.unshift(user)
        return list
    }

    render() {
        return (
            <Main {...headerProps}>
                Cadastro de Usuários
            </Main>
        )
    }
} 

錯誤信息

Answer 1

使用 this 在構造函數方法中聲明 state。

export default class UserCrud extends Component {

constructor(props) {
  super(props);

  this.state = { ...initalState };
}

clear() {
    this.setState({ user: initalState.user })
}

save() {
    const user = this.state.user
    const method = user.id ? 'put' : 'post'
    const url = user.id ? `${baseUrl}/${user.id}` : baseUrl
    axios[method](url, user)
        .then(resp => {
            const list = this.getUpdatedList(resp.data)
            this.setState({ user: initalState.user, list })
        })
}

getUpdatedList(user) {
    const list = this.state.list.filter(u => u.id !== user.id)
    list.unshift(user)
    return list
}

render() {
    return (
        <Main {...headerProps}>
            Cadastro de Usuários
        </Main>
    )
}
}