两个状态变量发生变化但只想重新渲染一次
Two state variables change but only want to re-render once
https://codesandbox.io/s/ancient-rain-19d4rb?file=/src/App.js
我在上面创建了一个沙箱来演示我遇到的问题。请试用它并查看代码以了解它在做什么。
左侧有 'gamemode' 选项，对于每个游戏模式，右侧都有 'options' 选项。
API 调用需要输入这两个值。
每当我更改右侧的选项时，它应该在 Game.js 中执行 API 调用
如果我更改左侧的游戏模式，它也应该自动将右侧的选项更改为第 0 个索引。根据我当前的逻辑，每当我更改游戏模式时它都会调用两次 API，因为它也会更改选项。 （改变模式时看控制台）
如何更改设计或如何进行调整以获得我想要的结果？
如果需要进一步说明，请告诉我。
问题是你有两个相互依赖的状态，被另一个对象独立观察导致不必要的 useEffect 调用。解决这个问题的一种方法是创建另一个结合 gamemode 和 option 的状态对象，并让 Game.js 仅观察该对象。这样，您可以添加自己的自定义逻辑来准确指示何时应调用 API。
这是一个实施了解决方案的沙箱：https://codesandbox.io/s/dazzling-galileo-sj29fh?file=/src/App.js
第一个 useEffect 依赖于 option 并在更改时立即更新 game 对象。第二个useEffect依赖于gamemode，首先检查option是否需要更新到第0个索引，否则直接更新game。
https://codesandbox.io/s/ancient-rain-19d4rb?file=/src/App.js
我在上面创建了一个沙箱来演示我遇到的问题。请试用它并查看代码以了解它在做什么。
API 调用需要输入这两个值。
每当我更改右侧的选项时，它应该在 Game.js 中执行 API 调用 如果我更改左侧的游戏模式，它也应该自动将右侧的选项更改为第 0 个索引。根据我当前的逻辑，每当我更改游戏模式时它都会调用两次 API，因为它也会更改选项。 （改变模式时看控制台）
如何更改设计或如何进行调整以获得我想要的结果？
如果需要进一步说明，请告诉我。
问题是你有两个相互依赖的状态，被另一个对象独立观察导致不必要的 useEffect 调用。解决这个问题的一种方法是创建另一个结合 gamemode 和 option 的状态对象，并让 Game.js 仅观察该对象。这样，您可以添加自己的自定义逻辑来准确指示何时应调用 API。
这是一个实施了解决方案的沙箱：https://codesandbox.io/s/dazzling-galileo-sj29fh?file=/src/App.js
第一个 useEffect 依赖于 option 并在更改时立即更新 game 对象。第二个useEffect依赖于gamemode，首先检查option是否需要更新到第0个索引，否则直接更新game。