0

I've got a component who is child from another that when is mounted called a function called getData(). This function after make some queries on the databse call to the method setState but this call doesn't work because doesn't change the value of loaded and is no exectuted the callback.

The code of the component is :

import React, {Component} from "react";
import {Determinator, MultiLang} from "react-multi-language";
import { getDataFromServer } from "./Functions";
import {GAME_STATS_BY_TEAM, TEAM_COMPETITION_STATS} from "../FEBCOM/Querys";

class TeamTableStandardStats extends Component {
    constructor(props){
        super();
        this.props = props;
        this.state = {
            loaded: false,
            lang: this.props.isFEB ? "es" : "en"
        };
    }

    componentDidMount(){
        this.getData();
    }

    async getData(){
        let params = [
            {"###id_team_club###": this.props.id_team},
            {"###id_competition###": this.props.id_competition}
        ];
        let team_games_stats = {};
        let team_comp_stats = {};
        if (this.props.isFEB){
            team_games_stats = await getDataFromServer(process.env.URL_FEB_API, GAME_STATS_BY_TEAM, params);
            team_comp_stats = await getDataFromServer(process.env.URL_FEB_API, TEAM_COMPETITION_STATS, params);    
        }else{
            team_games_stats = await getDataFromServer(process.env.URL_FIBA_API, GAME_STATS_BY_TEAM, params);
            team_comp_stats = await getDataFromServer(process.env.URL_FIBA_API, TEAM_COMPETITION_STATS, params);
        }
        console.log("getData() => Before setState");
        this.setState = ({
            loaded: true,
            // team_games_stats: team_games_stats.data.game_stats_by_team,
            // team_comp_stats: team_comp_stats.data.team_comp_stats
        }, () => {
            console.log("loaded: " + this.state.loaded);
        });
        console.log("getData() => After setState");
    }

    render(){
        return(
            <div>
                <span>loaded: {this.state.loaded ? "YES" : "NO"}</span>
                {
                    (this.state.loaded) ?
                        <div>
                            <h1>Tabla - {this.props.isFEB ? "Es FEB" : "Es FIBA"}</h1>
                            <span>id_team: {this.props.id_team} - id_competition: {this.props.id_competition}</span>
                            <span>Resumen: {this.state.team_comp_stats.length}</span>
                        </div>
                        :
                        <h5>
                            <Determinator>
                                {{
                                    es: "Cargando datos ...",
                                    en: "Loading data ..."
                                }}
                            </Determinator>
                        </h5>                     
                }
                <MultiLang lang = {this.state.lang} />
            </div>
        )
    }
}

module.exports.TeamTableStandardStats = TeamTableStandardStats;

These code when is exected writes in console.log:

enter image description here

How you can see the log which belongs to this instrucctions is not executed:

console.log("loaded: " + this.state.loaded);

And how loaded is false you can see this in the view:

enter image description here

So, I have no idea why is not executing the method setState.

What am I doing wrong?

José Carlos
  • 2,850
  • 12
  • 59
  • 95
  • 1
    Possible duplicate of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) – Emile Bergeron Nov 28 '19 at 23:35
  • 1
    I know that the change is async but is not called because the callback is not called too. This line is not executed _console.log("loaded: " + this.state.loaded);_ – José Carlos Nov 28 '19 at 23:39
  • Yes, I just saw James answer and it looks like a typo in your code prevented the function from being called. – Emile Bergeron Nov 28 '19 at 23:40
  • OMG!!! I have just found my mistake!!! Thank you for your appreciated help!!! – José Carlos Nov 28 '19 at 23:44
  • 3
    Glad you found the solution. Consider accepting the right answer, instead of updating your question to include the solution. – Bruno Monteiro Nov 28 '19 at 23:48
  • 1
    @BrunoMonteiro Do it!! ! have remove my solution. Thanks for the message!!! – José Carlos Nov 28 '19 at 23:52

2 Answers2

4

You aren't calling setState at all in your code by the looks of it, you are setting it

this.setState = ({ ... })

This line assigns the value of setState which is all wrong, setState is a function that you need to invoke to update the state i.e. 

this.setState({
  ...
})
James
  • 80,725
  • 18
  • 167
  • 237
1

setState is a method you should call it instead of assigning a new value to it.

Singhi John
  • 307
  • 2
  • 10