Javascript 用于在ReactJS中设置状态的条件（三元）运算符

我是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})
}

clickHandler（）{
让tripsOne=Math.round（Math.round（（this.state.amountOfGold/this.state.cargone）+0.5））
设hoursOne=（tripsOne*2+tripsOne*（this.state.distance/this.state.speedOne））.toFixed（2）
让tripsTwo=Math.round（Math.round（（this.state.amountOfGold/this.state.cargoTwo）+0.5））
设hours2=（tripsTwo*2+tripsTwo*（this.state.distance/this.state.speedTwo））.toFixed（2）
this.setState（{tripsOne:tripsOne，hoursOne:hoursOne，tripsTwo:tripsTwo，hours2:hours2，showData:true}）
hoursOne

我需要这个函数的最后一行起作用，以便给正确的玩家胜利

通过console.log，我意识到hoursOne（玩家需要运送黄金的小时数）和hours2的值被捕获，条件运算符有时工作方式错误

请随意尝试游戏：

https://leonelav.github.io/star-wars-react/

---

当我们点击

Play

时，赢家应该是在较短时间内运送给定数量黄金的玩家。所有行程都以相同的速度进行，在每次行程中，我们需要多加1小时充电，再加一小时放电。

您违反了反应状态规则：如果您根据状态设置状态，则必须使用回调版本的

设置状态，不是直接接受状态的版本。从

React可以将多个
setState（）
调用批处理到单个性能更新中

由于
this.props
和
this.state
可能会异步更新，因此不应依赖它们的值来计算下一个状态


要修复它，请使用第二种形式的
setState（）
，它接受函数而不是对象

因此，您需要将其重新编码为一个返回新状态的
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;
    });
}

clickHandler（）{
this.setState（state=>{
让tripsOne=Math.round（Math.round（（state.amountOfGold/state.cargone）+0.5））
让hoursOne=（tripsOne*2+tripsOne*（state.distance/state.speedOne））.toFixed（2）
让tripsTwo=Math.round（Math.round（（state.amountOfGold/state.cargoTwo）+0.5））
设hours2=（tripsTwo*2+tripsTwo*（state.distance/state.speedTwo））.toFixed（2）
让newState={
tripsOne:tripsOne，hoursOne:hoursOne，tripsTwo:tripsTwo，Hours2:Hours2，showData:true，
};
如果（小时一<小时二）{
newState.scoreOne=state.scoreOne+1；
newState.youWon=true；
}否则{
newSate.scoreTwo=state.scoreTwo+1；
}
返回新闻状态；
});
}

…或者，如果您真的想使用条件属性，您可以使用spread properties（一个由Transpiler支持的Stage3方案，出现在当前Chrome和Firefox等尖端浏览器中）：

clickHandler（）{
this.setState（state=>{
让tripsOne=Math.round（Math.round（（state.amountOfGold/state.cargone）+0.5））
让hoursOne=（tripsOne*2+tripsOne*（state.distance/state.speedOne））.toFixed（2）
让tripsTwo=Math.round（Math.round（（state.amountOfGold/state.cargoTwo）+0.5））
设hours2=（tripsTwo*2+tripsTwo*（state.distance/state.speedTwo））.toFixed（2）
返回{
tripsOne:tripsOne，hoursOne:hoursOne，tripsTwo:tripsTwo，Hours2:Hours2，showData:true，
…（hoursOne

…但我不会这样做。
“使用console.log，我意识到hoursOne（玩家需要运输黄金的小时数）和hours2的值被捕获，并且条件运算符有时以错误的方式工作”现在说什么？是的，您的代码看起来一般都很好，而且React没有任何特殊的地方会让这一行为变得古怪。你能再解释一下你看到的确切问题吗？请用一个演示问题的例子更新你的问题，最好是使用堆栈片段（工具栏按钮）运行的问题。@samanime:No，使用非回调
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)
        return {
            tripsOne: tripsOne, hoursOne: hoursOne, tripsTwo: tripsTwo, hoursTwo: hoursTwo, showData: true,
            ...(hoursOne < hoursTwo ? {scoreOne: state.scoreOne + 1, youWon: true} : {scoreTwo: scoreTwo + 1})
        };
    });
}