反应：如果运行另一个事件函数，则变量重置为默认值

Question

我在React中有以下代码：

let down = 0

const moveUp = e => {
//other code
let up = down - 300
}

const moveDown = e => {
//other code
down = down + 300
}

<Button onClick={moveUp} btntext="Up"/>
<Button onClick={moveDown} btntext="Down"/>

Down是用户单击的第一个按钮，它将Down变量增加300，所以假设我们将Down变量增加了3倍，即900。

问题是，当我们试图点击向上按钮引用moveUp函数时，向下变量现在被设置回默认值0，为什么会发生这种情况，900的更改不应该存储在内存中吗？

我真的很想在这里得到一些帮助，很明显，我对Javascript事件和变量范围有一些不理解的地方。

Answer 1

尝试将向下存储为状态变量。你的组件可能会在某个地方重新渲染，导致down初始化回0。

更新将是

import React, { useState } from 'react'

const [down, setDown] = useState(0)

const moveUp = e => {
    //other code
    setDown(down - 300)
}

const moveDown = e => {
    //other code
    setDown(down + 300)
}

<Button onClick={moveUp} btntext="Up"/>
<Button onClick={moveDown} btntext="Down"/>