区分已点击和未点击的divs响应js

Question

我有一个简单的任务要做，但是这一步对我来说已经很痛苦。我已经获取了一个api，并使用state在两个不同的变量中存储了两个不同城市的温度。任务如下：

if(clickedTemp>notClickedTemp){
    setState({
        socre: this.state.score+=1
    })
}

这是伪代码，但是我不能写出能起作用的真实代码:(

[各城市使用其ID从api中随机获取，请提供帮助

Answer 1

我不知道我对你的要求是否正确。对我来说，您似乎想比较两个变量？然后使++成为反应状态？

如果是这样，应该是这样。

if (var1 > var2) {
    let actualScore = this.state.score;
    actualScore++;
    this.setState({
        score: actualScore
    })
})

但是要小心，因为如果var1和var2不是数字，它将无法按预期方式工作。

Answer 2

为此，我将切换到React Hooks。简单到

//... inside a function component
const [clickedTemp, setClickedTemp] = React.useState()
const [notClickedTemp, setNotClickedTemp] = React.useState()
const [score, setScore] = React.useState(0)

React.useEffect(() => {
    if (clickedTemp > notClickedTemp) {
        setScore(score + 1)
    }
}, [clickedTemp, notClickedTemp])

这样，每次获取数据时，都可以使用setClickedTemp(fetchedData)和setNotClickedTemp(fetchedData)对其进行更新，并且useEffect钩子将自动检测变化，进行比较并更新得分。

有关React Hooks，useState和useEffect here的更多信息。