AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

使用 useState 需要注意的 5 个问题

2023-02-22 445
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 使用 useState 需要注意的 5 个问题

使用 useState 需要注意的 5 个问题

开发任何应用程序最具挑战性的方面通常是管理其状态。然而，我们经常需要在应用程序中管理多个状态片段，例如当从外部服务器检索数据或在应用程序中更新数据时。

状态管理的困难是今天存在如此多状态管理库的原因，而且更多的库仍在开发中。值得庆幸的是，React 以 hook 的形式提供了几个用于状态管理的内置解决方案，这使得 React 中的状态管理更加容易。

众所周知，hook 在 React 组件开发中变得越来越重要，特别是在功能组件中，因为它们已经完全取代了对基于类的组件的需求，而基于类的组件是管理有状态组件的传统方式。useState hook 是 React 中引入的众多 hook 之一，但是尽管 useState hook 已经出现几年了，开发人员仍然容易因为理解不足而犯常见的错误。

useState hook 可能很难理解，特别是对于新手 React 开发人员或从基于类的组件迁移到函数组件的开发人员。在本文中，我们将探讨使用 useState 需要注意的 5 个问题，以及如何避免它们。

1. 初始化 useState 错误

错误地初始化 useState hook 是开发人员在使用它时最常犯的错误之一。问题是 useState 允许你使用任何你想要的东西来定义它的初始状态。然而，没有人直接告诉你的是，根据组件在该状态下的期望，使用错误的类型值初始化 useState 可能会导致应用程序中意外的行为，例如无法呈现 UI，导致黑屏错误。

例如，我们有一个组件，它期望一个包含用户名称、图像和个人简历的用户对象状态——在这个组件中，我们呈现用户的属性。使用不同的数据类型（如空状态或空值）初始化 useState 将导致空白页错误，如下所示。

import { useState } from "react";
function App() {
  // 初始化状态
  const [user, setUser] = useState();
  // 渲染 UI
  return (
    <div className='App'>
      <img src={user.image} alt='profile image' />
      <p>User: {user.name}</p>
      <p>About: {user.bio}</p>
    </div>
  );
}
export default App;

我们可以看到页面一篇空白，检查控制台将抛出如下所示的类似错误：

b7b9727d79566d185ca6f137c77f1681.png

新手的开发人员在初始化他们的状态时经常犯这个错误，特别是在从服务器或数据库获取数据时，因为检索到的数据期望用实际的用户对象更新状态。然而，这是一种不好的做法，可能会导致预期的行为，如上所示。

初始化 useState 的首选方法是将预期的数据类型传递给它，以避免潜在的空白页错误。例如，一个空对象，如下所示，可以传递给状态：

import { useState } from "react";
function App() {
  // 使用期望的数据类型初始化状态
  const [user, setUser] = useState({});
  // 渲染 UI
  return (
    <div className='App'>
      <img src={user.image} alt='profile image' />
      <p>User: {user.name}</p>
      <p>About: {user.bio}</p>
    </div>
  );
}
export default App;

这个时候我们可以看到页面如下所示：

0167261e14f4f78051ed0fa29b2ee9c3.png

我们可以更进一步，在初始化状态时定义用户对象的预期属性。

import { useState } from "react";
function App() {
  // 使用期望的数据类型初始化状态
  const [user, setUser] = useState({
    image: "",
    name: "",
    bio: "",
  });
  // 渲染 UI
  return (
    <div className='App'>
      <img src={user.image} alt='profile image' />
      <p>User: {user.name}</p>
      <p>About: {user.bio}</p>
    </div>
  );
}
export default App;

2. 没有使用可选链

有时，仅仅使用预期的数据类型初始化 useState 往往不足以防止意外的空白页错误。当试图访问深嵌套在相关对象链中的深嵌套对象的属性时，尤其如此。

你通常尝试通过使用点（.）操作符通过相关对象来访问该对象，例如 user.names.firstName。但是，如果丢失了任何链接的对象或属性，就会出现问题。页面将中断，用户将得到一个空白页错误。

例如：

import { useState } from "react";
function App() {
  // 使用期望的数据类型初始化状态
  const [user, setUser] = useState({});
  // 渲染 UI
  return (
    <div className='App'>
      <img src={user.image} alt='profile image' />
      <p>User: {user.names.firstName}</p>
      <p>About: {user.bio}</p>
    </div>
  );
}
export default App;

我们可以看到页面一篇空白，检查控制台将抛出如下所示的类似错误：

bff048a4f5a3f394c51565114efc6f1e.png

对于这个错误和 UI 未呈现的典型解决方案是使用条件检查来验证状态的存在性，在呈现组件之前检查它是否可访问，例如 user.names && user.names.firstname，它只在左侧表达式为真（如果 user.names 存在）时计算右侧表达式。然而，这个解决方案很混乱，因为它需要对每个对象链进行多次检查。

使用可选的链接操作符（?.），你可以读取深埋在相关对象链中的属性值，而不需要验证每个引用的对象是否有效。可选的链接操作符（?.）就像点链接操作符（.），不同的是，如果引用的对象或属性缺失（即 null 或 undefined），表达式短路并返回 undefined 值。简单地说，如果丢失了任何链接对象，它就不会继续进行链接操作（短路）。

例如，user?.names?.firstname 不会抛出任何错误或中断页面，因为一旦它检测到 user 或 names 对象丢失，它将立即终止操作。

import { useState } from "react";
function App() {
  // 使用期望的数据类型初始化状态
  const [user, setUser] = useState({});
  // 渲染 UI
  return (
    <div className='App'>
      <img src={user.image} alt='profile image' />
      <p>User: {user?.names?.firstName}</p>
      <p>About: {user.bio}</p>
    </div>
  );
}
export default App;

在访问状态中的链接属性时，利用可选的链接操作符可以简化和缩短表达式，这在探索对象的内容时非常有用，对象的引用可能事先不知道。

3. 直接更新 useState

缺乏对 React 如何调度和更新状态的正确理解，很容易导致在更新应用程序状态时出现错误。在使用 useState 时，我们通常定义一个状态并使用 set state 函数直接更新状态。

例如，我们创建了一个计数状态和一个附加到按钮的 handler 函数，该函数在单击时为状态添加 1（+1）：

import { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  // 直接更新状态
  const increase = () => setCount(count + 1);
  // 渲染 UI
  return (
    <div className='App'>
      <span>Count: {count}</span>
      <button onClick={increase}>Add +1</button>
    </div>
  );
}
export default App;

02eb6e75ac7b5fbe7fc7fb00cf1736b2.jpg在这里插入图片描述

这和预期的一样。但是，直接更新状态是一种不好的做法，在处理多个用户使用的实时应用程序时可能会导致潜在的错误。为什么？因为与你所想的相反，React 不会在单击按钮时立即更新状态。相反，React 获取当前状态的快照，并将更新（+1）安排在稍后执行，以获得性能提升——这发生在几毫秒内，因此肉眼不会注意到。然而，虽然预定的更新仍然处于暂挂的转换中，但当前状态可能会被其他内容更改（例如多个用户的情况）。预定的更新将无法知道这个新事件，因为它只有单击按钮时所获得的状态快照的记录。

这可能会导致应用程序出现严重的错误和奇怪的行为。让我们通过添加另一个按钮来查看实际操作，该按钮在延迟 2 秒后异步更新计数状态。

import { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  // 直接更新状态
  const update = () => setCount(count + 1);
  // 在 2 秒后直接更新状态
  const asyncUpdate = () => {
    setTimeout(() => {
      setCount(count + 1);
    }, 2000);
  };
  // 渲染 UI
  return (
    <div className='App'>
      <span>Count: {count}</span>
      <button onClick={update}>Add +1</button>
      <button onClick={asyncUpdate}>Add +1 later</button>
    </div>
  );
}

请注意输出中的错误：

e92783c755d2a7d2aaa13dd071b39a6e.jpg

注意到这个错误吗？我们首先两次点击第一个“Add +1”按钮（这将更新状态为1 +1 = 2），之后，我们点击“Add +1 later” —— 这将获取当前状态（2）的快照，并在两秒后调度更新，向该状态添加 1。但是当这个计划更新还处于过渡阶段时，我们继续点击“Add +1”按钮三次，将当前状态更新为5（即2 +1 +1 +1 = 5）。然而，异步定时更新尝试在两秒钟后使用它在内存中的快照（2）更新状态）即 2 + 1 = 3），而没有意识到当前状态已更新为 5。结果，状态被更新为 3 而不是 6。

这个无意的错误经常困扰那些仅使用 setState(newValue) 函数直接更新状态的应用程序。更新 useState 的建议方法是通过函数更新来传递给 setState() 一个回调函数，在这个回调函数中我们传递该实例的当前状态，例如 setState(currentState => currentState + newValue)。这将在预定的更新时间将当前状态传递给回调函数，从而可以在尝试更新之前知道当前状态。

因此，让我们修改示例演示，使用函数更新而不是直接更新。

import { useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  // 直接更新状态
  const update = () => setCount(count + 1);
  // 在 2 秒后直接更新状态
  const asyncUpdate = () => {
    setTimeout(() => {
      setCount((currentCount) => currentCount + 1);
    }, 2000);
  };
  // 渲染 UI
  return (
    <div className='App'>
      <span>Count: {count}</span>
      <button onClick={update}>Add +1</button>
      <button onClick={asyncUpdate}>Add +1 later</button>
    </div>
  );
}
export default App;

7ac38a50e4bb81361f0266d1531fbf05.jpg

通过函数式更新，setState() 函数知道状态已更新为 5，因此它将状态更新为 6。

4. 更新特定对象属性

另一个常见错误是只修改对象或数组的属性而不修改引用本身。

例如，我们用定义好的 name 和 age 属性初始化一个用户对象。然而，我们的组件有一个按钮，它试图只更新用户名，如下所示。

import { useState, useEffect } from "react";
export default function App() {
  const [user, setUser] = useState({
    name: "John",
    age: 25,
  });
  // 更新用户状态属性
  const changeName = () => {
    setUser((user) => (user.name = "Mark"));
  };
  // 渲染 UI
  return (
    <div className='App'>
      <p>User: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={changeName}>Change name</button>
    </div>
  );
}

点击按钮前的初始状态：

a2b8f5c93e71c79ef6432205f8d6c18a.png

点击按钮后的更新状态：

614a84d4c1707bdfc458c5695717cfed.png

正如你所看到的，用户不再是一个对象，而是被改写为字符串 "Mark"，而不是特定的属性被修改。为什么？因为 setState() 将返回或传递给它的任何值赋值为新状态。

一种典型的老式方法是创建一个新的对象引用，并将前一个用户对象分配给它，直接修改用户名。

import { useState, useEffect } from "react";
export default function App() {
  const [user, setUser] = useState({
    name: "John",
    age: 25,
  });
  // 更新用户状态属性
  const changeName = () => {
    setUser((user) => Object.assign({}, user, { name: "Mark" }));
  };
  // 渲染 UI
  return (
    <div className='App'>
      <p>User: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={changeName}>Change name</button>
    </div>
  );
}

点击按钮后的更新状态：

f3c7032afb775c3954ed3b3cf5a3b6a3.png

注意，只有用户名被修改了，而其他属性保持不变。

然而，更新特定属性、对象或数组的理想而现代的方法是使用 ES6 扩展操作符（...）。在处理功能组件中的状态时，这是更新对象或数组的特定属性的理想方法。使用这个扩展操作符，你可以轻松地将现有项的属性解包到新项中，同时修改或向解包项添加新属性。

import { useState, useEffect } from "react";
export default function App() {
  const [user, setUser] = useState({
    name: "John",
    age: 25,
  });
  // 使用扩展操作符更新用户状态的属性
  const changeName = () => {
    setUser((user) => ({ ...user, name: "Mark" }));
  };
  // 渲染 UI
  return (
    <div className='App'>
      <p>User: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={changeName}>Change name</button>
    </div>
  );
}

结果将与上一个状态相同。单击按钮后，name 属性将被更新，而其他用户属性保持不变。

5. 管理表单中的多个输入字段

管理表单中的几个受控输入通常是通过为每个输入字段手动创建多个 useState() 函数并将每个函数绑定到相应的输入字段来完成的。例如：

import { useState, useEffect } from "react";
export default function App() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [age, setAge] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");
  // 渲染 UI
  return (
    <div className='App'>
      <form>
        <input type='text' placeholder='First Name' />
        <input type='text' placeholder='Last Name' />
        <input type='number' placeholder='Age' />
        <input type='text' placeholder='Username' />
        <input type='password' placeholder='Password' />
        <input type='email' placeholder='email' />
      </form>
    </div>
  );
}

此外，必须为每个输入创建处理程序函数，以建立双向数据流，在输入值输入时更新每个状态。这可能是相当多余和耗时的，因为它涉及编写大量代码，降低了代码库的可读性。

但是，只使用一个 useState hook 就可以管理表单中的多个输入字段。这可以通过以下方法实现：首先为每个输入字段指定一个惟一的名称，然后创建一个 useState() 函数，该函数使用与输入字段名称相同的属性进行初始化：

import { useState, useEffect } from "react";
export default function App() {
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    age: "",
    username: "",
    password: "",
    email: "",
  });
  // 渲染 UI
  return (
    <div className='App'>
      <form>
        <input type='text' name='firstName' placeholder='First Name' />
        <input type='text' name='lastName' placeholder='Last Name' />
        <input type='number' name='age' placeholder='Age' />
        <input type='text' name='username' placeholder='Username' />
        <input type='password' name='password' placeholder='Password' />
        <input type='email' name='email' placeholder='email' />
      </form>
    </div>
  );
}

在此之后，我们创建一个处理程序事件函数，该函数更新用户对象的特定属性，以反映每当用户输入内容时表单中的更改。这可以通过使用拓展操作符和使用 event.target.elementsName = event.target.value 动态访问触发处理程序函数的特定输入元素的名称来完成。

换句话说，我们通常检查传递给事件函数的事件对象，获取目标元素名称（与用户状态下的属性名称相同），并用目标元素中的关联值更新它，如下所示：

import { useState, useEffect } from "react";
export default function App() {
  const [user, setUser] = useState({
    firstName: "",
    lastName: "",
    age: "",
    username: "",
    password: "",
    email: "",
  });
  // 更新特定的输入字段
  const handleChange = (e) => 
    setUser(prevState => ({...prevState, [e.target.name]: e.target.value}))
  // 渲染 UI
  return (
    <div className='App'>
      <form>
        <input type='text' onChange={handleChange} name='firstName' placeholder='First Name' />
        <input type='text' onChange={handleChange} name='lastName' placeholder='Last Name' />
        <input type='number' onChange={handleChange} name='age' placeholder='Age' />
        <input type='text' onChange={handleChange} name='username' placeholder='Username' />
        <input type='password' onChange={handleChange} name='password' placeholder='Password' />
        <input type='email' onChange={handleChange} name='email' placeholder='email' />
      </form>
    </div>
  );
}

在此实现中，对于每个用户输入都触发事件处理程序函数。在这个事件函数中，我们有一个 setUser() 状态函数，它接受用户的以前/当前状态，并使用拓展操作符解包这个用户状态。然后检查事件对象中触发函数的目标元素名（与状态中的属性名相关）。获得此属性名后，我们修改它以反映表单中的用户输入值。

6. 小结

作为一个创建高度交互用户界面的 React 开发人员，你可能犯过上面提到的一些错误。希望这些有用的 useState 实践能够帮助你在构建 React 驱动的应用程序时使用 useState hook 避免这些潜在的错误。

文章标签：
前端开发
数据库
调度
游客mm3oox3r3c656
目录
相关文章
瓴羊Dataphin
|
调度
Dataphin功能Tips系列（7）-维表版本策略
在创建普通维度逻辑表和事实逻辑表关联维度时，如何配置维表版本策略？
瓴羊Dataphin
342 2
Dataphin功能Tips系列（7）-维表版本策略
小鎏学java
|
6月前
|
JavaScript 前端开发
for of和 for in的区别
JavaScript中，for...of遍历可迭代对象的值，适合数组；for...in遍历对象属性，注意其遍历顺序不确定且包括继承属性，可用hasOwnProperty判断自身属性。同步指任务依次执行，异步则通过回调或事件实现非阻塞执行，适用于耗时任务如网络请求。常见异步方式包括定时器、接口调用、事件监听。
小鎏学java
254 0
夏天49597
|
前端开发 JavaScript 测试技术
React 错误边界 (Error Boundaries) 详解
【10月更文挑战第17天】在现代前端开发中，React 通过“错误边界”机制提高了应用的健壮性和用户体验。错误边界是一种特殊的 React 组件，能捕获并处理其子组件树中的 JavaScript 错误，防止应用因局部错误而整体崩溃。创建错误边界需实现 `static getDerivedStateFromError` 和 `componentDidCatch` 方法，分别用于更新状态和记录错误。正确使用错误边界，可以有效提升应用的稳定性和用户满意度。
夏天49597
877 62
程序员一鸣
|
API
鸿蒙开发：简单了解属性动画
无论是是使用animateTo还是animation，其实最终要改变的都是组件的可执行属性，最终的效果是一致的，animateTo是闭包内改变属性引起的界面变化，一般作用于出现消失转场，而animation则是组件通过属性接口绑定的属性变化引起的界面变化，一般使用场景为，animateTo适用对多个可动画属性配置相同动画参数的动画，需要嵌套使用动画的场景；animation适用于对多个可动画属性配置不同参数动画的场景。
程序员一鸣
401 4
鸿蒙开发：简单了解属性动画
龙大吉
|
前端开发
create-react-app 如何使用 less/sass 和 react-css-modules？
本文详细介绍了在 create-react-app 项目中如何使用 less/sass 和 react-css-modules 来管理和应用样式。首先，通过安装相应依赖并配置 webpack 支持 less/sass；接着，介绍如何使用这些预处理器编写样式；最后，讲解了如何配置和使用 react-css-modules 实现样式的模块化管理，以及如何结合使用 less/sass 和 react-css-modules 提高开发效率和代码质量。
龙大吉
355 3
你都不懂
|
前端开发
react antd点击table行时加选中背景色
react antd点击table行时加选中背景色
你都不懂
349 5
土木林森
|
前端开发 JavaScript 开发者
React生命周期方法完全指南：深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法，包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法，如`componentDidMount`和`componentWillUnmount`，帮助开发者在正确时机执行所需操作，提升应用性能。文章还提供了最佳实践，指导如何避免常见错误并充分利用最新钩子。
土木林森
418 0
源码宝
|
监控 NoSQL Java
java云MES 系统源码Java+ springboot+ mysql 一款基于云计算技术的企业级生产管理系统
MES系统是生产企业对制造执行系统实施的重点在智能制造执行管理领域，而MES系统特点中的可伸缩、信息精确、开放、承接、安全等也传递出：MES在此管理领域中无可替代的“王者之尊”。MES制造执行系统特点集可伸缩性、精确性、开放性、承接性、经济性与安全性于一体，帮助企业解决生产中遇到的实际问题，降低运营成本，快速适应企业不断的制造执行管理需求，使得企业已有基础设施与一切可用资源实现高度集成，提升企业投资的有效性。
源码宝
358 5
前端徐徐
|
存储 前端开发 JavaScript
React useState 和 useRef 的区别
本文介绍了 React 中 `useState` 和 `useRef` 这两个重要 Hook 的区别和使用场景。`useState` 用于管理状态并在状态变化时重新渲染组件，适用于表单输入、显示/隐藏组件、动态样式等场景。`useRef` 则用于在渲染之间保持可变值而不触发重新渲染，适用于访问 DOM 元素、存储定时器 ID 等场景。文章还提供了具体的代码示例，帮助读者更好地理解和应用这两个 Hook。
前端徐徐
554 0
gornin
|
缓存 前端开发 JavaScript
如何减少React中无关组件的重渲染
你是否同我一样，总是会遇到一些莫名其妙的渲染问题，有时为了解决bug，需要耗费相当气力来debug呢？快来一起学习下react re-render 这些小技巧吧，或许能帮你减少组件树中无关组件的重渲染及重挂载，可以提升性能，同时也能提高用户体验哟。 案例代码：https://github.com/buzingar/re-render-demos
gornin
2735 5