这一周遇到的坑

一周坑途记

嗨，大家好，我是[你的名字]，一位专注于技术博客创作的专家。今天，我将和大家分享这一周以来我在编程征途上踩过的几个坑。

通过分享这些经历，我希望能够帮助其他开发者避免类似的错误，并促进整个社区的成长。

坑 1：position:relative 会提升元素层叠顺序

任务是实现一个单选框位于卡片列表的右边 20px，垂直居中。当时的想法是使用定位，用父元素 position:relative 来提升元素的层叠顺序。

<div class="card-list">
  <div class="card">
    <input type="radio" name="radio-group" />
  </div>
</div>

.card-list {
  position: relative;
}

.card {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

然而，这个解决方案存在一个问题。position:relative 除了会提升元素的层叠顺序，还会创建一个新的层叠上下文。这会导致子元素的绝对定位相对于父元素进行，而不是相对于文档流。因此，单选框并没有正确对齐。

坑 2：谨慎使用三元运算符

第二个坑与三元运算符有关。任务是根据一个布尔变量 isClicked 来显示或隐藏一个元素。最初的代码如下：

{isClicked ? <p>显示</p> : <p>隐藏</p>}

然而，这个代码会导致页面闪烁，因为在重新渲染之前，隐藏的元素会短暂地显示出来。为了解决这个问题，可以使用条件渲染：

{isClicked && <p>显示</p>}

坑 3：留意 async/await 的陷阱

最后一个坑是关于 async/await。任务是创建一个函数，该函数从服务器获取数据并将其存储在状态中。最初的代码如下：

const getData = async () => {
  const response = await fetch('/data.json');
  const data = await response.json();
  setState(data);
};

但是，这个代码有一个问题。如果在调用 getData 函数之前组件卸载，那么 setState 调用将无效，因为组件不再挂载。为了解决这个问题，可以使用 useEffect 钩子：

useEffect(() => {
  const getData = async () => {
    const response = await fetch('/data.json');
    const data = await response.json();
    setState(data);
  };

  getData();
}, []);

通过这些真实的经历，我希望大家能够吸取教训，避免在自己的项目中遇到类似的坑。编程是一个不断学习和成长的过程，通过分享我们的经验，我们可以共同进步，打造更可靠、更高效的软件。