Como acessar uma variável que está em outro método?

Front-end JavaScript
, , , ,
#1

Através de um select preciso filtrar algumas informações, mas como faço para o valor da this.state.lista receber o valor da listaFiltrada? A listaFiltrada já recebe as informações necessárias conforme seleciono as opções do select.

const initialState = {
    aluno: { id: 0, ra: '', nome: '', codCurso: 0 },
    lista: [],

    curso: { id: 0, codCurso: 0, nomeCurso: '', periodo: '' },
    listaCurso: []
}

export default class CrudCarometro extends Component {

    state = { ...initialState }

    componentDidMount() {
        axios(urlAPI).then(resp => {
            this.setState({ lista: resp.data })
        })

        axios(urlAPICurso).then(resp => {
            this.setState({ listaCurso: resp.data })
        })
    }

    atualizaCampo(event) {
        const aluno = this.state.aluno
        const curso = this.state.curso
        aluno.codCurso = Number(curso.codCurso)

        const listaFiltrada = this.state.lista.filter(a => a.codCurso == event)
        console.log(listaFiltrada)
    }

    renderForm() {
        return (
            <center>
                <div className="master" id="master">

                    <select id="filtro" name="codCurso" onChange={e => this.atualizaCampo(e.target.value)}>
                        <option value="" disabled="disabled" selected="selected">Filtrar</option>
                        {this.state.listaCurso.map(curso => (<option key={curso.id} value={curso.codCurso}
                        >{curso.nomeCurso}</option>))}
                    </select>

                    {this.state.lista.map(
                        (aluno) =>
                            <div className="card" id="card">
                                <div className="picture" id="picture">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Mel_Gibson_Cannes_2016_2.jpg/330px-Mel_Gibson_Cannes_2016_2.jpg"></img>
                                </div>
                                <h2>{aluno.ra}</h2>
                                <h2>{aluno.nome}</h2>
                                <h2>{aluno.codCurso}</h2>
                            </div>
                    )}

                </div>
            </center>
        )
    }
#2

Você pode manter sua listaFiltrada no state, assim sua função atualizaCampo sempre filtra a lista completa e atualiza o resultado na lista filtrada, e no seu render você utiliza a lista filtrada para montar os cards:

                    {this.state.listaFiltrada.map(
                        (aluno) =>
                            <div className="card" id="card">
                                <div className="picture" id="picture">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Mel_Gibson_Cannes_2016_2.jpg/330px-Mel_Gibson_Cannes_2016_2.jpg"></img>
                                </div>
                                <h2>{aluno.ra}</h2>
                                <h2>{aluno.nome}</h2>
                                <h2>{aluno.codCurso}</h2>
                            </div>
                    )}
#3

Já havia tentado isso, porém ele retorna alguns erros quando entro na página carometro.

print
print1920×1005 104 KB

Dando esses erros, a classe inteira está assim:

import React, { Component } from "react"
import axios from "axios"
import './CrudCarometro.css'

const urlAPI = "https://localhost:7008/api/carometro"

const urlAPICurso = "https://localhost:7008/api/curso"

const initialState = {
    aluno: { id: 0, ra: '', nome: '', codCurso: 0 },
    lista: [],

    curso: { id: 0, codCurso: 0, nomeCurso: '', periodo: '' },
    listaCurso: []
}

export default class CrudCarometro extends Component {

    state = { ...initialState }

    componentDidMount() {
        axios(urlAPI).then(resp => {
            this.setState({ lista: resp.data })
        })

        axios(urlAPICurso).then(resp => {
            this.setState({ listaCurso: resp.data })
        })
    }

    atualizaCampo(event) {
        const aluno = this.state.aluno
        const curso = this.state.curso
        aluno.codCurso = Number(curso.codCurso)

        const listaFiltrada = this.state.lista.filter(a => a.codCurso == event)
        return listaFiltrada
    }

    renderForm() {
        return (
            <center>
                <div className="master" id="master">

                    <select id="filtro" name="codCurso" onChange={e => this.atualizaCampo(e.target.value)}>
                        <option value="" disabled="disabled" selected="selected">Filtrar</option>
                        {this.state.listaCurso.map(curso => (<option key={curso.id} value={curso.codCurso}
                        >{curso.nomeCurso}</option>))}
                    </select>

                    {this.state.listaFiltrada.map(
                        (aluno) =>
                            <div className="card" id="card">
                                <div className="picture" id="picture">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Mel_Gibson_Cannes_2016_2.jpg/330px-Mel_Gibson_Cannes_2016_2.jpg"></img>
                                </div>
                                <h2>{aluno.ra}</h2>
                                <h2>{aluno.nome}</h2>
                                <h2>{aluno.codCurso}</h2>
                            </div>
                    )}

                </div>
            </center>
        )
    }

    render() {
        return (
            this.renderForm()
        )
    }

}
#4

Faltou declarar a listaFiltrada no state e popular com o retorno da API, vê se assim da certo:

import React, { Component } from "react"
import axios from "axios"
import './CrudCarometro.css'

const urlAPI = "https://localhost:7008/api/carometro"

const urlAPICurso = "https://localhost:7008/api/curso"

const initialState = {
    aluno: { id: 0, ra: '', nome: '', codCurso: 0 },
    lista: [],
    listaFiltrada: [],

    curso: { id: 0, codCurso: 0, nomeCurso: '', periodo: '' },
    listaCurso: []
}

export default class CrudCarometro extends Component {

    state = { ...initialState }

    componentDidMount() {
        axios(urlAPI).then(resp => {
            this.setState({ lista: resp.data, listaFiltrada: resp.data})
        })

        axios(urlAPICurso).then(resp => {
            this.setState({ listaCurso: resp.data })
        })
    }

    atualizaCampo(event) {
        const aluno = this.state.aluno
        const curso = this.state.curso
        aluno.codCurso = Number(curso.codCurso)

        const listaFiltrada = this.state.lista.filter(a => a.codCurso == event)
        this.setState({ listaFiltrada: listaFiltrada})
    }

    renderForm() {
        return (
            <center>
                <div className="master" id="master">

                    <select id="filtro" name="codCurso" onChange={e => this.atualizaCampo(e.target.value)}>
                        <option value="" disabled="disabled" selected="selected">Filtrar</option>
                        {this.state.listaCurso.map(curso => (<option key={curso.id} value={curso.codCurso}
                        >{curso.nomeCurso}</option>))}
                    </select>

                    {this.state.listaFiltrada.map(
                        (aluno) =>
                            <div className="card" id="card">
                                <div className="picture" id="picture">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Mel_Gibson_Cannes_2016_2.jpg/330px-Mel_Gibson_Cannes_2016_2.jpg"></img>
                                </div>
                                <h2>{aluno.ra}</h2>
                                <h2>{aluno.nome}</h2>
                                <h2>{aluno.codCurso}</h2>
                            </div>
                    )}

                </div>
            </center>
        )
    }

    render() {
        return (
            this.renderForm()
        )
    }

}
1 curtida
#5

Muito obrigado, funcionou!

1 curtida