React não pode ler a propriedade 'setState' de undefined em if-block

Question

Estou criando meu primeiro aplicativo de front-end ReactJS e estou tendo um problema. Quando tento chamar minha função setState (ou qualquer outra função para esse assunto) com isso. antes dele dentro de um bloco if, recebo o erro.

Rejeição não tratada (TypeError): Não é possível ler a propriedade 'setState' de undefined

Quando eu chamo as funções dentro do meu didComponentMount () está tudo bem, então acho que o problema é o bloco if. Eu tentei várias soluções em questões diferentes, mas nenhuma tem um bloco if, então não funciona para mim.

Função que gera erro:

getFilteredTrades() {
        if(document.getElementById("switch").checked){
            fetch("http://localhost:8080/trades/filter?plaform=NintendoSwitch").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("playstation").checked) {
            fetch("http://localhost:8080/trades/filter?platform=PlayStation").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("xbox").checked) {
            fetch("http://localhost:8080/trades/filter?platform=XBox").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("pc").checked) {
            fetch("http://localhost:8080/trades/filter?platform=PC").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else {
            alert("No filter is selected, so all trades will be displayed.")
            this.getAllTrades();
        }
    }

SetState e getAllTrades apresentarão erros aqui.

getAllTrades ():

getAllTrades() {
        fetch("http://localhost:8080/trades/all").then(rse => rse.json()).then(
            result => {
                this.setState({trades: result});
            }
        )
    }

construtor:

constructor(props){
        super(props);

        this.state = {
            trades: []
        }
    }

didComponentMount, onde getAllTrades FUNCIONA:

componentDidMount() {
        this.getAllTrades();
    }

Alguém conhece uma solução para este problema? Desde já, obrigado.

Answer 1

Em suas funções getFilteredTradese refere-se às próprias funções e não ao objeto e essas funções não têm um membro .getAllTradesthissetState

Você pode resolver o problema de duas maneiras:

1. Declarando-os como funções de seta que não vinculam thispor escrito getFilteredTrades = () => { ... }e getAllTrades = () => { ... }.
2. Vincule a thispalavra - chave das funções ao objeto de classe escrevendo this.getFilteredTrades = this.getFilteredTrades.bind(this)e this.getAllTrades = this.getAllTrades.bind(this)em seu construtor.

Answer 2

Parece que você está perdendo o contexto em algum ponto. Tente vincular seus métodos ou torná-los funções de seta:

getAllTrades=()=>{...}

Se não ajudar, tente combiná-lo com self = este truque, que foi sugerido acima