React 开发中最常见的错误以及如何避免它们 ⚛️

我开发 React 应用程序已经有几年了，我经历了无数的错误，这些错误减慢了项目的开发速度。

React 是构建动态用户界面的最流行的库之一，但它的灵活性也会导致新开发人员犯某些常见错误。

本指南涵盖了开发人员在 React 中最容易犯的错误，并提供了可操作的技巧来编写更好、更高效的代码。

让我们开始吧！

1. 变异状态

在继续之前，让我们先编写我们的 React 组件，该组件应该显示项目列表，以及添加或删除一个项目：

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

此方法所做的第一件事是调用推送数组函数，旨在将元素添加到数组中。
第二件事是调用 setItems 将更改应用到状态变量。

但是，如果您尝试运行此代码，它将无法工作❌

这段代码违反了一个非常重要的 React 规则：改变状态。

React 依靠状态变量的身份来判断状态何时发生变化。当我们将一个项目推入数组时，我们并没有更改该数组的标识，因此 React 无法判断该值已更改并重新渲染该数组。

以下是修复方法 ✅ :

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

在此方法中，我使用展开运算符创建了一个新数组...允许使用项目内容实例化新数组。第二个参数用于添加新内容（此处为 item）。

最后一步是调用 setItems 方法来验证变量项的新状态 ✅

---

2. 不生成列表中的键

每个 React 开发者在他们的开发过程中可能至少见过一次这个错误。

发生这种情况的最常见方式是映射数据时。以下是此违规行为的示例：

items.map((item) => (
    <div>
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

当我们想要渲染一个元素数组时，我们需要为 React 提供更多的上下文以允许它识别每个项目。在最好的情况下，它必须是唯一标识符。

这是解决此问题的快速方法，但这并不是最佳方法：

items.map((item, index) => (
    <div key="{index}">
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

当您获得 React 经验并了解它如何更好地工作时，您将能够根据您的情况判断它是否可以。

为了使其完美，您可以使用 uuid 生成器，例如 crypto.randomUUID() 并将其作为对象存储到项目列表中，如下所示：

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

并在渲染过程中按如下方式使用它：

items.map((item, index) => (
    <div key="{item.id}">
        {item.value}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

现在一切都很完美✅

---

3.在useEffect中使用async

假设我们有一个函数需要在挂载时从 API 获取一些数据。我们将使用 useEffect 钩子，并且我们想要使用 wait 关键字。

让我们检查一下第一次尝试：

如您所知，await 关键字需要位于标有 async 关键字的函数中：

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

不幸的是，这不起作用，我们收到此错误消息：

function goodHandleAddItem(item) {
    if (item.length === 0)
        return;

    const newArray = [...items, item];

    setItems(newArray);
    setItemToAdd('');
}

这里是修复：在 useEffect 挂钩中创建一个单独的异步函数 ✅

items.map((item) => (
    <div>
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

了解 async 关键字的含义很重要：
它不返回对象 json，它返回一个解析对象 json 的 Promise。

这实际上是一个问题，因为 useEffect 不应该返回 Promise。它期望我们要么不返回任何内容（就像上面的那样），要么返回一个清理函数。清理功能很重要，超出了本指南的范围，但这里可以使用它：

items.map((item, index) => (
    <div key="{index}">
        {item}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

---

4. 重新渲染前访问状态

让我们回到状态管理，看看新开发人员经常犯的另一个有趣的错误。这将帮助我们更好地理解 React 状态。

让我们用 goodHandleAddItem 方法来说明这一点：

const newItemToAdd = {
    id: crypto.randomUUID(),
    value: item
};
const newArray = [...items, newItemToAdd];
  setItems(newItems);

运行此代码时，我们可以看到控制台没有记录我们期望的结果。

问题是：状态变量的setter 函数是异步。

当我们调用 setItems 方法时，我们实际上是在安排更新，而不是分配变量。

这里是修复：我们已经知道 newArray 变量的变量内容应该是什么。这意味着要使用我们想要作为 items 变量内容的数据，即使在 setItems ✅ 之后，我们也需要 使用变量 newArray

来代替

---

5. 使用陈旧的状态数据

最后一篇也是关于React状态管理的，看完这篇指南你就会成为专家了！ ？

使用 React Hooks 时的一个常见陷阱是滥用过时的状态数据。当我们在连续状态更新中直接引用状态变量时，可能会发生这种情况。正如我们在上一个错误中看到的，状态更新可能是异步的，这意味着状态变量在连续调用中引用时可能不会反映最新值。

让我们用一个全新的例子来让事情变得更清楚，众所周知的计数器：

items.map((item, index) => (
    <div key="{item.id}">
        {item.value}
        <button onclick="{()"> removeItem(item)}>-</button>
    </div>
))}

以上用法是错误的。事实上，count 是在 setCount 调用中直接引用的。在事件处理程序和生命周期方法中，状态更新可以批量进行，并且都使用与计数相同的初始值，这将导致最终状态不正确。

我们可以使用另一种形式的 setCount 来使事情正常工作：更新函数。 updater 函数将之前的状态作为参数并返回新的状态，因此每次连续的更新都将具有正确的值，从而防止出现不需要的行为。

使用方法如下：

import { useState } from "react";

const Home = (props) => {
    const [items, setItems] = useState(['item1', 'item2']);
    const [itemToAdd, setItemToAdd] = useState('');

    function wrongHandleAddItem(item) {
        items.push(item);

        setItems(items);
    }

    function goodHandleAddItem(item) {
        if (item.length === 0)
            return;

        const newArray = [...items, item];

        setItems(newArray);
        setItemToAdd('');
    }

    function removeItem(item) {
        const itemIndex = items.indexOf(item);

        if (itemIndex !== -1) {
            const newArray = [...items];

            newArray.splice(itemIndex, 1);
            setItems(newArray);
        }
    }

    return (
        <div>



<p>Here, I wrote two different methods to add an item in the items state array. Let's break it down together:<br>
</p>

<pre class="brush:php;toolbar:false">function wrongHandleAddItem(item) {
    items.push(item);

    setItems(items);
}

记录计数内容现在指示正确的值✅

---

结论

避免这些常见错误将使您开发出性能更高的 React 应用并掌握状态管理！

希望本指南对您有所帮助，并祝您编码愉快！

作为新的或已确认的 React 开发人员，如果您喜欢本指南，请留下一个赞？

很快再见！