在 setState 之前响应 if/else 返回答案

【问题标题】：React if/else returns before setState在 setState 之前响应 if/else 返回
【发布时间】：2020-03-19 09:02:23
【问题描述】：

我想通过函数 ScoreCalc 然后将最终的“primeCount”和 setState primeScore 返回到该数字。

当 ScoreCalc() 在 componentWillMount 中运行时，this.state.animeMax 仍然为空。当我刷新页面时，primeScore 或 primeCount 会更改值。我猜是因为有时“最大”状态有时不会挂载！？

如果有人有想法，请告诉我。

谢谢！

export class Quality extends Component {
    constructor (props) {
        super (props) 
            this.state = {
                primeScore: 0,
                netflixScore: 0,
                huluScore: 0,
                provider:[],
                actionMax:'',
                animeMax:'',
                childrenMax:'',
                comedyMax:'',
                documentaryMax:'',
                horrorMax:'',
                musicalMax:'',
                romanceMax:'',
                scifiMax:'',
                thrillerMax:'',
            }
            this.ScoreCalc = this.ScoreCalc.bind(this);
    }

componentWillMount (){
    axios.get('http://localhost:8001/provider')
        .then(res => this.setState({
            provider: res.data
        },()=>{this.ScoreCalc()}))
    axios.get('http://localhost:8001/provider/actionmax')
        .then(res => this.setState({actionMax: res.data}))
.....10 more axios requests to setState for other "max"....

}

ScoreCalc (){
        let primeCount = 0
            if(this.state.provider[0].primeAction >= this.state.actionMax){
                primeCount += this.props.user.action;
                console.log(primeCount)
            } else {
                primeCount += (this.props.user.action*this.state.provider[0].primeAction/this.state.actionMax)
            }

            if(this.state.provider[0].primeAnime >= this.state.animeMax){
                primeCount += this.props.user.anime;
            } else {
                primeCount += this.props.user.anime*this.state.provider[0].primeAnime/this.state.animeMax;
                console.log(this.state.animeMax) //returns empty ''
                console.log(primeCount) //return infinity
            }

            if(this.state.provider[0].primeChildren >= this.state.childrenMax){
                primeCount += this.props.user.children;
            } else {
                primeCount += this.props.user.children*this.state.provider[0].primeChildren/this.state.childrenMax
            }

         console.log(primeCount); //return infinity
         this.setState({primeScore: primeCount})
}

【问题讨论】：

标签： javascript reactjs if-statement state infinite-loop

【解决方案1】：

你好像有错别字？

在scoreCalc() 中，您正在这样检查：

if(this.state.provider[0].primeAction >= this.actionMax){

我认为应该是：

if(this.state.provider[0].primeAction >= this.state.actionMax){

其他if的也一样？

【讨论】：

谢谢。完全错过了！你能解决问题1吗？当我刷新时，primeScore 或最终 primeCount 会更改值。我相信这是因为一些“最大”状态仍未定义。
不客气！好吧，您可能需要做的是，由于您需要在执行scoreCalc() 之前填充一些值，因此您可以链接您的 axios 请求，例如： Promise.all([ axios.get('localhost:8001/provider') .then(res => this.setState({ provider: res.data })), axios.get('localhost:8001/provider/actionmax') .then(res => this.setState({actionMax: res.data})), ...更多axios请求，]).then(() => this.scoreCalc())
我觉得不太清楚，因为我不能在那里使用代码块，但是，搜索 Promise.all，可能这会解决你的问题！