React中设置数组状态时能否直接引用输入框的状态值？

写法是否正确？ #

这种写法在大多数简单场景下能正常运行，但存在潜在的闭包陷阱，不是最严谨的实现方式。

原因是：React的状态更新是异步的，onSubmitHandler函数会捕获定义它时的text闭包值。如果组件存在异步更新逻辑、或者onSubmitHandler通过useCallback缓存但未正确添加text到依赖数组，就可能导致向textArr中添加的是旧的text值，出现状态不同步的问题。

替代方案 #

方案1：通过useRef获取输入框实时值 #

直接获取DOM输入框的当前值，完全不依赖text状态的闭包捕获：

import { useState, useRef } from 'react';

const [text, setText] = useState('');
const [textArr, setTextArr] = useState([]);
const inputRef = useRef(null);

const onChangeTextHandler = (e) => {
  setText(e.target.value);
}

const onSubmitHandler = () => {
  const currentValue = inputRef.current.value;
  setTextArr(prevArr => [...prevArr, currentValue]);
}

// 对应输入组件
<input 
  ref={inputRef} 
  value={text} 
  onChange={onChangeTextHandler} 
/>

方案2：提交时传入当前输入值 #

在调用提交函数时直接传递最新的text值，避免闭包捕获旧值：

const onSubmitHandler = (currentText) => {
  setTextArr(prevArr => [...prevArr, currentText]);
}

// 按钮点击时调用
<button onClick={() => onSubmitHandler(text)}>提交</button>

方案3：正确处理回调函数的依赖 #

如果坚持使用原有的写法，确保onSubmitHandler能捕获到最新的text值，用useCallback包裹并添加正确的依赖：

import { useState, useCallback } from 'react';

const [text, setText] = useState('');
const [textArr, setTextArr] = useState([]);

const onChangeTextHandler = (e) => {
  setText(e.target.value);
}

const onSubmitHandler = useCallback(() => {
  setTextArr(prevArr => [...prevArr, text]);
}, [text]); // 依赖数组添加text，确保回调更新时捕获最新值

内容的提问来源于stack exchange，提问作者Rizwan Shaikh