Question

React-useEffect 块加载页面

2022-04-12

682

javascript reactjs use-effect

几天前我开始学习 React，现在我被 useEffect 问题困住了。

为了让您了解情况，我正在构建一个单一行星页面，您可以在行星之间切换并显示它们的信息。

我们必须点击一些按钮才能获取有关行星的一些详细信息。因此，当选择按钮时，它们会获得特定的类。因此，当我们前往另一个星球时，我希望这些按钮能恢复其默认的 className！

因此，我编写了一个 useEffect，每次我们在星球之间切换时，通过单击星球按钮来编辑某些按钮的 className。

但此后，如果我从 Google 的重新加载按钮重新加载页面，我的组件根本不会呈现，我只能获得应用程序的背景。

useEffect(() => {
  buttonOverview.className = planetDetails[selectedPlanet].name;
  buttonStructure.className = "buttonStructure";
  buttonSurface.className = "buttonSurface";
}, [selectedPlanet]);

谷歌给出了错误代码：“未捕获的 TypeError：无法设置 null 属性（设置‘className’）”

但我不明白，因为我了解到 useEffect 仅在渲染后播放，那么问题是什么？

Answer 1

您实际上不需要 在此处使用 。将所选行星存储在状态下，然后使用CSS更新类。

这是一个示例（行星不扩展）。

781199040

Answer 2

您需要利用 React 状态来存储和设置这些类名。您可以使用 useState 钩子来执行此操作。

场景 1：

这应该可以解决问题：

const [buttonOverviewClassName, setButtonOverviewClassName] = useState("");
const [buttonStructureClassName, setButtonStructureClassName] = useState("");
const [buttonSurfaceClassName, setButtonSurfaceClassName] = useState("");

useEffect(() => {
  setButtonOverviewClassName(planetDetails[selectedPlanet].name);
  setButtonStructureClassName("buttonStructure");
  setButtonSurfaceClassName("buttonSurface");
}, [selectedPlanet]);

然后，对于 return 语句中的 button ，您只需将 className 设置为与该值匹配，如下所示：

<button className={buttonOverviewClassName}>Overview</button>

场景 2：

另一种选择是将所有 className 组合在一起作为一个对象，因为无论如何您都会一起更改它们。

您可以这样做：

const [classNames, setClassNames] = useState({
  overview: "",
  structure: "",
  surface: "",
});

useEffect(() => {
  setClassNames({
    overview: planetDetails[selectedPlanet].name,
    structure: "buttonStructure",
    surface: "buttonSurface"
  });
}, [selectedPlanet])

然后像这样使用它：

<button className={classNames.overview}>Overview</button>