首页 >web前端 >js教程 >React 开发中最常见的错误以及如何避免它们 ⚛️

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

Linda Hamilton
Linda Hamilton原创
2024-12-22 20:09:17892浏览

我开发 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. 不生成列表中的键

Top ommon Mistakes in React Development and How to Avoid Them ⚛️

每个 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 开发人员,如果您喜欢本指南,请留下一个赞?

很快再见!

以上是React 开发中最常见的错误以及如何避免它们 ⚛️的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn