javascript - react : setState method is not executed

Question

我有一个组件，它是另一个组件的子组件，在安装时调用一个名为 getData() 的函数。此函数在对数据库进行一些查询后调用 setState 方法，但此调用不起作用，因为不会更改已加载的值，也不会执行回调。

该组件的代码是:

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;

这些代码执行时会写入console.log:

如何查看属于该指令的日志没有被执行:

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

加载的方式是错误的，您可以在 View 中看到:

所以，我不知道为什么不执行 setState 方法。

我做错了什么？

Answer 1

从代码的外观来看，您根本没有调用 setState，而是设置它

this.setState = ({ ... })

这一行分配了 setState 的值，这是完全错误的，setState 是一个函数，您需要调用它来更新状态，即

this.setState({
  ...
})