我正在构建一个基于文本的游戏，我正在从 JS 转换它。如何使变量可变？

Question

这最初是来自免费代码营的 JS 项目，但为了将其放在我的作品集网站上，我想让它具有交互性。

我尝试将变量设置为 state 并通过 props 向下传递，但变量只会在最初发生变化一次，并且显示不会进一步更新。这是一些可以让您了解整个项目的代码。

//JSX file
export default function DragonRepeller() {
const [health, setHealth] = useState({ health: 100 });
const [gold, setGold] = useState({ gold: 50 });
// various other initializers and some objects 

function buyHealth() {
    if (gold.gold >= 10) {
       setGold((prevGold) => { return { gold: prevGold.gold - 10 }});
       setHealth((prevHealth) => { return { health: prevHealth.health + 10 }});
  } else {
       setText(() => { return { text: 'You do not have enough gold to buy health' }});
  }
 }
//the rest of the code
}
return (
<div id=game>
   <div id='stats'>
      <span className='stat'>Health: <strong><span id='healthText'>{health.health}</span></strong></span>
      <span className='stat'>Gold: <strong><span id='goldText'>{gold.gold}</span></strong></span>
   </div>
   <div id='text'>
      {text.text}
   </div>
</div>
)

我觉得我的处理方式是错误的，需要一些帮助。

我尝试使用不同的设置状态方式多次重写代码。每次我运行代码时，文本都会随着我设置的更改而不断更新，但其他变量只会发生一次变化，然后它们会恢复到初始状态或第一种更改方式。

我尝试了普通 JS 而不是 JSX，但遇到了更多函数未执行的问题。

我也一直在搜索堆栈溢出以查找可能与此相关的任何内容，但我还没有找到任何有效的解决方案，这让我觉得我在这里错过了一个关键点。

Answer 1

setGold((prevGold) => { return: { gold: prevGold.gold - 10 }});

返回时语法错误：

更改为：两者都适用。

setGold((prevGold) => { return { gold: prevGold.gold - 10 }});