Question

大家好，

关于StackOverflow的第一篇文章，对Web Dev领域来说是相当新的东西，但是我正在与我的一个朋友一起指导我。我来到这里是因为我们似乎都找不到我遇到的问题的答案。就是这样，希望我能使自己足够清楚，让您对我有所帮助。
因此，我正在为一个朋友创建我的第一个网站，这是一个简单的项目。我试图通过上下文渲染（和重新渲染）组件的地方（以及所述上下文的不同更改）。因此，针对这个问题https://codesandbox.io/s/mystifying-https-l5c6d?file=/src/App.js
，这是我项目的简化版本
对于上下文，我试图每次单击该行星时显示一个与该行星（灰色圆圈）相对应的信息框（黄色正方形），并且在每次单击另一个行星以使该行星变暗时，该信息框应消失出现其他信息框。

因此，为此，我创建了一个状态，该状态的状态包含表示行星的对象，每个行星上的onClick函数都可以更改一个布尔值，该布尔值可以显示或不显示信息框。

从console.log可以看到，它确实发生了变化，但是实际上它从未通过单击信息框重新渲染组件行星，而如果您手动更改上下文，它将在第一次渲染时出现。既然我到处都看到（反应文档和stackoverflow）：“当上下文值更改时，调用useContext的组件将始终重新呈现。”

为什么我的更改不会重新呈现？

希望我已经明确表示自己，并提供了足够的信息。

编辑：抱歉，每个人，我想我已经更新了我的沙箱，第一次使用它，我想我对本地存储感到困惑。

Answer 1

您的沙盒代码显示为空，尽管问题可能出在您未在应用组件的状态内存储上下文值。如果您更改静态值，则不会触发重新渲染。

请参见以下工作示例： https://codesandbox.io/s/eager-fermat-6ji6y?file=/src/App.js

编辑：您的减速器是直接改变状态，更改为下面即可工作

export const planetReducer = (planetsTab, action) => {
  switch (action.type) {
    case "switchPlanetToggle":
      return [
        ...planetsTab.slice(0, action.index),
        {
          ...planetsTab[action.index],
          planetToggle: !planetsTab[action.index].planetToggle
        },
        ...planetsTab.slice(action.index + 1)
      ];
    default:
      return planetsTab;
  }
};

https://codesandbox.io/s/twilight-sea-lwwep?file=/src/PlanetsContext.js

反应：上下文更改不会重新渲染我的组件

1 个答案: