反应:不执行setState方法

问题描述 投票:0回答:1

我有一个组件,该组件是另一个组件的子组件,该组件在安装时称为getData()函数。在对方法setState的databse调用进行了一些查询之后,此函数无效,但是此调用不起作用,因为它不会更改load的值,并且不会执行回调。

该组件的代码是:

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:

enter image description here

如何查看属于该说明的日志未执行:

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

并且如何加载为假,您可以在视图中看到此:

enter image description here

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

我在做什么错?

javascript node.js reactjs
1个回答
4
投票

您从代码的外观上根本不是通话中 setState,您是设置它] >>

this.setState = ({ ... })

此行分配了setState的值,这是完全错误的,setState是您需要调用以更新状态的function

this.setState({
  ...
})

1
投票

setState是一种应调用它的方法,而不是为其分配新值。

© www.soinside.com 2019 - 2024. All rights reserved.