Next.JS/React 组件不反映状态变量的值

Question

这是我在 Next.JS 应用程序中的一些看似简单的 React 代码。 （我只放了与我的问题相关的部分。）

.....
const [topXplain, setTopXplain]  = useState(true);
.....
<div className="z-10 max-w-5xl w-full ... text-sm lg:flex">
  <div className="flex flex-col">
    <div>{topXplain?"YES":"NO"}</div>
    <ReviewSession userID={user!.uid}
                   lang={prefLang}
                   revType={revisType}
                   tpXpln={true}
                   tpXplFn={updateUserTopXplain} />
    <ReviewSession userID={user!.uid}
                   lang={prefLang}
                   revType={revisType}
                   tpXpln={false}
                   tpXplFn={updateUserTopXplain} />
    <ReviewSession userID={user!.uid}
                   lang={prefLang}
                   revType={revisType}
                   tpXpln={topXplain}
                   tpXplFn={updateUserTopXplain} />
  </div>
</div>

我遇到的问题相当令人费解。当我更改 topXplain 的状态时，我可以看到（通过网络浏览器中的结果）行： {topXplain?"YES":"NO"} 的行为符合预期。 也就是说，它从“是”切换为“否”，依此类推。当页面重新加载时，显示也符合预期。

第一个和第二个 ReviewSession 也按预期显示。

另一方面，最后一个 ReviewSession 显示总是像 topXplain 为 true 一样开始（即使它为 false）。

我所看到的似乎有些不一致。这就是为什么我认为外观可能有用。

两个顶部 ReviewSession（对于 tpXpln 给出 true 和 false）表明组件 (ReviewSession) 行为正常。

标签（YES-NO）显示也表明正确反映了topXplain的状态。

但是为什么最后一个ReviewSession出现时没有反映呢？ 我一定错过了一些细节。

Answer 1

我可以看一下这个组件吗？

另外，如果您想更快地捕获错误并解决它，我认为您应该专注于每次组件重新渲染时记录状态值，而不是依赖“是”和“否”输出最有效的方式。

每当组件中的状态/属性发生变化时，您都会收到日志，您可以检查是否有一次状态设置错误或其他情况。

您也可以使用调试器。