React：如果运行另一个事件函数，变量将重置为默认值答案

【问题标题】：React: Variable resets to default if another event function is runReact：如果运行另一个事件函数，变量将重置为默认值
【发布时间】：2020-07-20 00:29:11
【问题描述】：

我在 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"/>

向下是用户单击的第一个按钮，它将向下变量增加 300，因此假设我们向下增加了 3 次，即 900。

问题是，当我们尝试点击引用 moveUp 函数的 Up 按钮时，down 变量现在被设置回它的默认值，即 0，为什么会这样，对900的更改不应该存入内存吗？

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

【问题讨论】：

你试过在状态中存储down吗？
这能回答你的问题吗？ What is state in React?

标签： javascript reactjs event-handling dom-events

【解决方案1】：

尝试将down 存储为状态变量。您的组件可能会在某处重新渲染，导致 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"/>

【讨论】：