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

问题描述

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

我发布了 codesandbox 示例。

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

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

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

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

解决方法

问题出在这里：

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 可以注意到它们的不同并重新渲染。