具有复杂类型的 React TypeScript UseContext 不起作用答案

【问题标题】：React TypeScript UseContext with complex type does not work具有复杂类型的 React TypeScript UseContext 不起作用
【发布时间】：2020-12-29 23:58:19
【问题描述】：

ThemeContext example from this link 有效，但它只服务于一个领域。我尝试将此示例用于复杂类型的 UserContext。状态已设置，但未呈现。

我发布了codesandbox 示例。

第一个按钮切换状态主题。

第二个按钮更改了 User.auth 状态，但页面没有呈现。

点击第一个按钮可以看到状态已经设置正确。

有人知道我做错了什么吗？

【问题讨论】：

有问题的代码应该在您的问题中可见，而不仅仅是外部链接。您甚至还没有链接到源代码，只是代码沙箱中的应用程序。见stackoverflow.com/help/minimal-reproducible-example
源代码已链接（见右下角）。

标签： reactjs typescript use-context

【解决方案1】：

问题出在这里：

if (aUser.authorized) {
  aUser.authorized = false;
  setUser(aUser);
} else {
  aUser.authorized = true;
  setUser(aUser);
}

你正在改变你状态中的一个对象。你不应该那样做。 React 通过查看 state 是否具有相同的对象来测试它是否应该重新渲染。由于你还没有传入一个新对象，React 不知道它应该重新渲染。

你可能想要这个：

function toggleAuth() {
  setUser({ ...user, authorized: !user.authorized })
}

这样你创建一个新对象传递给setState，React 看到它是一个新对象，然后会按照你的期望重新渲染。

主题切换起作用的原因是它使用了这个功能：

function togleTheme() {
  theme === Theme.Dark ? setTheme(Theme.Light) : setTheme(Theme.Dark);
}

每次切换时都会传入一个完全不同的值，而不会对现有对象进行任何更改。所以 React 可以注意到它们是不同的并重新渲染。

【讨论】：

非常感谢。您不仅向我展示了解决方案，还描述了它的工作原理。那太棒了。祝你有美好的一天，新年快乐。