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

Question

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

我发布了 codesandbox 示例。

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

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

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

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

Answer 1

问题出在这里：

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

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

您可能需要这个：

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

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

主题切换之所以起作用，是因为它使用了这个功能：

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

每次切换时都会传递一个完全不同的值，现有对象没有任何变化。所以 React 可以注意到它们不同并重新渲染。

React TypeScript UseContext with complex type does not work