区分单击和未单击的 div React js答案

【问题标题】：Distinguish clicked and unclicked divs React js区分单击和未单击的 div React js
【发布时间】：2020-03-18 16:34:51
【问题描述】：

我在 react 中有一个简单的任务要做，但这一步对我来说已经变得很痛苦。

我使用 state 获取了一个 api，并将两个不同城市的温度存储在两个不同的变量中。

任务如下：

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

这是伪代码，但我写不出真正有效的代码:(

城市使用他们的id随机从api中获取，如果可以请帮助

【问题讨论】：

您能否详细说明一下您当前的问题并分享您到目前为止所做的工作？
请发布完整的组件以及确切的目标。
1.您的 setState 在关键 socre 2 中有错误。不要直接改变状态。 setState({ ...this.state, score: this.state.score+1 })

标签： javascript reactjs weather-api

【解决方案1】：

我不知道我是否完全正确地理解了你所追求的。对我来说，您似乎想比较两个变量？然后对react状态打个++？

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

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

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

【讨论】：

问题是我们将点击的值与另一个值进行比较，这让我感到困惑，而不仅仅是两个值 a 和 be

【解决方案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。

【讨论】：

您是如何得出 OP 无法正确使用钩子的结论的？