Como fazer métodos de uma Class, funcionarem em uma function hooks?

Front-end
,
#1

Tive que converter uma classe em hooks, para funcionar a autenticação de login usando useEffect. A autenticação está funcionando perfeitamente, porém os métodos pararam de funcionar.
Essa é o site:

exemplo
exemplo1920×788 108 KB

Isso é o que ocorre quando clico no botão de editar, para mudar as informações:

erro
erro1920×777 84.1 KB

Minha classe:

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import './CrudMeta.css'
import Main from '../template/Main'
import editButton from '../../assets/images/editButton.svg'
import deleteButton from '../../assets/images/deleteButton.svg'
import UserService from '../../services/UserService'

const urlAPI = "http://localhost:5165/api/meta"

const user = JSON.parse(localStorage.getItem("user"))

const initialState = {
    meta: { id: 0, nomeMeta: '', valorMeta: 0, valorDestinadoMes: 0 },
    lista: []
}

export default function CrudMeta(props) {

    const [lista, setLista] = useState([])
    const [mens, setMens] = useState([])
    const [meta, setMeta] = useState('')
    const [state, setState] = useState(initialState)

    useEffect(() => {
        console.log(state)
        UserService.getAssinanteBoard().then(
            (response) => {
                console.log("useEffect getAssinanteBoard: " + response.data)
                setLista(response.data)
                setMens(null)
            },
            (error) => {
                const _mens =
                    (error.response &&
                        error.response.data &&
                        error.response.data.message) ||
                    error.message ||
                    error.toString()
                setMens(_mens)
                console.log("_mens: " + _mens)
            }
        )
    }, [])

    const limpar = () => {
        this.setState({ meta: initialState.meta })
    }

    const salvar = () => {
        const meta = this.state.meta
        const metodo = meta.id ? 'put' : 'post'
        const url = meta.id ? `${urlAPI}/${meta.id}` : urlAPI

        axios[metodo](url, meta)
            .then(resp => {
                const lista = this.getListaAtualizada(resp.data)
                this.setState({ meta: initialState.meta, lista })
            })
    }

    const getListaAtualizada = (meta, add = true) => {
        const lista = this.state.lista.filter(g => g.id !== meta.id)
        if (add) lista.unshift(meta)
        return lista
    }

    const atualizaCampo = (event) => {
        const ganho = { ...state.ganho }
        ganho[event.target.name] = event.target.value
        setState({ ganho })
    }

    const carregar = (meta) => {
        console.log(meta)
        setState(meta)
    }

    const remover = (meta) => {
        const url = urlAPI + "/" + meta.id
        if (window.confirm("Confirma remoção do meta: " + meta.nomeMeta)) {
            console.log("entrou no confirm")

            axios['delete'](url, meta)
                .then(resp => {
                    const lista = getListaAtualizada(meta, false)
                    this.setState({ meta: initialState.meta, lista })
                })
        }
    }

    const renderTable = () => {

        return (
            <div className="financeCardMeta">
                <div className="inclui-container">
                    <label> Nome da Meta: </label>
                    <input
                        type="text"
                        id="nomeMeta"
                        placeholder="Nome do Meta"
                        className="form-input"
                        name="nomeMeta"

                        value={state.meta.nomeMeta}

                        onChange={e => atualizaCampo(e)}
                    />

                    <label> Valor da Meta: </label>
                    <input
                        type="text"
                        id="valorMeta"
                        placeholder="Valor da Meta"
                        className="form-input"
                        name="valorMeta"
                        //onInput={e => mascaraMoeda(e)}

                        value={state.meta.valorMeta}

                        onChange={e => atualizaCampo(e)}
                    />

                    <label> Valor Destinado: </label>
                    <input
                        type="text"
                        id="valorMeta"
                        placeholder="Valor Destinado"
                        className="form-input"
                        name="valorDestinadoMes"
                        //onInput={e => this.mascaraMoeda(e)}

                        value={state.meta.valorDestinadoMes}

                        onChange={e => atualizaCampo(e)}
                    />

                    <button className="btnMeta"
                        onClick={e => salvar(e)} >
                        Salvar
                    </button>
                    <button className="btnMeta"
                        onClick={e => limpar(e)} >
                        Cancelar
                    </button>
                </div>

                <div className="listagem">
                    <table className="listaMeta" id="tblListaMeta">
                        <thead>
                            <tr className="cabecTabela">
                                <th className="tabTituloNome" id='tab'>Nome da Meta</th>
                                <th className="tabTituloValor" id='tab'>Valor da Meta</th>
                                <th className="tabTituloValor" id='tab'>Valor Destinado/Mês</th>
                            </tr>
                        </thead>

                        <tbody>
                            {lista.map(
                                (meta) =>
                                    <tr key={meta.id}>
                                        <td id='nomeMeta'>{meta.nomeMeta}</td>
                                        <td id='valorMeta'>{meta.valorMeta.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}</td>
                                        <td id='valorMeta'>{meta.valorDestinadoMes.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })}</td>
                                        <td id='editButton'>
                                            <div className="edit-button" onClick={() => carregar(meta)}>
                                                <img src={editButton} alt="Editar" />
                                            </div>
                                        </td>
                                        <td id='deleteButton'>
                                            <div className="delete-button" onClick={() => remover(meta)}>
                                                <img src={deleteButton} alt="Deletar" />
                                            </div>
                                        </td>
                                    </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }

    return (
        <Main>
            {(mens) ? <div className='msgAutenticacao'>Assine o site para ter acesso a essa aba.</div> : renderTable()}
        </Main>
    )

Agradeço muito quem puder ajudar.

#2

Olhando por cima da para notar que você manteve o this em alguns métodos ainda, como não está mais trabalhando com class você precisa tira-los:

const limpar = () => {
    this.setState({ meta: initialState.meta }) //<-- Aqui tem um "this"....
}

const salvar = () => {
    const meta = this.state.meta ////<-- Aqui tem um "this"....
    const metodo = meta.id ? 'put' : 'post'
    const url = meta.id ? `${urlAPI}/${meta.id}` : urlAPI

    axios[metodo](url, meta)
        .then(resp => {
            const lista = this.getListaAtualizada(resp.data)
            this.setState({ meta: initialState.meta, lista })
        })
}

const getListaAtualizada = (meta, add = true) => {
    const lista = this.state.lista.filter(g => g.id !== meta.id) //<-- Aqui tem um "this"....
    if (add) lista.unshift(meta)
    return lista
}

Eu recomendo você ir isolando cada método e ir revisando e arrumando um por um.

#3

Pois é, os métodos que estavam sem o this, eram os que estava testando e tentando concertar. Removi todos os this e o erro persiste.

Esses são os métodos atualizaCampo e carregar antes dos hooks no formato class:

atualizaCampo(event) {
        const meta = { ...this.state.meta }
        meta[event.target.name] = event.target.value
        this.setState({ meta })
    }

 carregar(meta) {
        this.setState({ meta })
    }

Dessa maneira eles funcionavam. O atualizaCampo é chamado quando digito no input, e o carregar quando clico no botão de editar. Alguém que já está familiarizado com hooks sabe o que estou fazendo de errado?

#4

Dessa forma funciona?

 atualizaCampo(event) {
        const meta = { ...state.meta }
        meta[event.target.name] = event.target.value
        setState({ ...state, meta })
    }

 carregar(meta) {
        setState({ ...state, meta })
    }
1 curtida
#5

Funcionou! Muito obrigado, vou estudar hooks pra entender esses detalhes.

1 curtida