React 状态更新陷阱及解决方案

📅 2026/6/20 9:52:44
React 状态更新陷阱及解决方案
在使用 React 开发应用时,处理用户输入并更新状态是一个常见的任务。然而,在这个过程中,如果不注意细节,可能会遇到一些意想不到的错误。今天我们来探讨一个典型的例子,分析问题原因并提供解决方案。问题描述假设我们有一个简单的 React 组件,允许用户在一个输入框中输入文本,并通过useState来管理输入状态:import { useState } from "react"; export function App() { const [txt, setTxt] = useState(""); return ( input value={txt} onInput={(e) = { setTxt(() = e.currentTarget.value); }} / ); }期望的效果是,当用户输入文本时,onInput事件触发,更新txt状态,使输入框显示最新输入的文本。但实际上,代码在第二次触发onInput事件后会崩溃,抛出以下错误:Uncaught TypeError: Cannot read properties of null (reading 'value')问题分析问题出在setTxt的使用方式上。我们使用了箭头函数来更新