javascript - 在 ReactJS 中设置状态的条件(三元)运算符

Question

我是 Reactjs 新手，正在做一个游戏来练习。我想使用条件运算符更改 clickHandler 函数内的状态。但如果我能做到这一点并且我的游戏无法正常运行，那么现在就不要这样做。

clickHandler(){
let tripsOne = Math.round(Math.round((this.state.amountOfGold / this.state.cargoOne) + 0.5))
let hoursOne= (tripsOne*2 + tripsOne*(this.state.distance/this.state.speedOne)).toFixed(2)
let tripsTwo = Math.round(Math.round((this.state.amountOfGold / this.state.cargoTwo) + 0.5))
let hoursTwo= (tripsTwo*2 + tripsTwo*(this.state.distance/this.state.speedTwo)).toFixed(2)
this.setState({tripsOne: tripsOne, hoursOne: hoursOne, tripsTwo: tripsTwo, hoursTwo: hoursTwo, showData: true})
hoursOne < hoursTwo ? this.setState({scoreOne: this.state.scoreOne +1, youWon:true}) : this.setState({scoreTwo: this.state.scoreTwo +1})
}

我需要该函数的最后一行起作用，以便将胜利给予正确的玩家。

通过console.log，我意识到hoursOne(玩家一需要运输黄金的小时数)和hoursTwo的值被捕获，并且条件运算符有时会以错误的方式工作。

欢迎尝试游戏:https://leonelav.github.io/star-wars-react/

当我们点击Play时，获胜者应该是在更短的时间内运输给定数量的黄金的玩家。所有行程都以相同的速度进行，每次行程我们需要多加 1 小时来充金，再多加 1 小时来放电。

Answer 1

您违反了 React 状态规则:如果您要根据状态设置状态，则必须使用 setState 的回调版本，不能 直接接受状态的版本。来自 the documentation

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

...

To fix it, use a second form of setState() that accepts a function rather than an object.

因此，您需要将其重新转换为返回新状态的单个 setState 调用，大致如下:

clickHandler(){
    this.setState(state => {
        let tripsOne = Math.round(Math.round((state.amountOfGold / state.cargoOne) + 0.5))
        let hoursOne= (tripsOne*2 + tripsOne*(state.distance/state.speedOne)).toFixed(2)
        let tripsTwo = Math.round(Math.round((state.amountOfGold / state.cargoTwo) + 0.5))
        let hoursTwo= (tripsTwo*2 + tripsTwo*(state.distance/state.speedTwo)).toFixed(2)
        let newState = {
            tripsOne: tripsOne, hoursOne: hoursOne, tripsTwo: tripsTwo, hoursTwo: hoursTwo, showData: true,
        };
        if (hoursOne < hoursTwo) {
            newState.scoreOne = state.scoreOne + 1;
            newState.youWon = true;
        } else {
            newSate.scoreTwo = state.scoreTwo + 1;
        }
        return newState;
    });
}

...或者，如果您确实想要使用条件，则可以使用扩展属性(第 3 阶段提案，由转译器支持，出现在当前 Chrome 和 Firefox 等尖端浏览器中) :

clickHandler(){
    this.setState(state => {
        let tripsOne = Math.round(Math.round((state.amountOfGold / state.cargoOne) + 0.5))
        let hoursOne= (tripsOne*2 + tripsOne*(state.distance/state.speedOne)).toFixed(2)
        let tripsTwo = Math.round(Math.round((state.amountOfGold / state.cargoTwo) + 0.5))
        let hoursTwo= (tripsTwo*2 + tripsTwo*(state.distance/state.speedTwo)).toFixed(2)
        return {
            tripsOne: tripsOne, hoursOne: hoursOne, tripsTwo: tripsTwo, hoursTwo: hoursTwo, showData: true,
            ...(hoursOne < hoursTwo ? {scoreOne: state.scoreOne + 1, youWon: true} : {scoreTwo: scoreTwo + 1})
        };
    });
}

...但我不会。