React Hooks中字符串类型state的函数式实时更新写法是什么

React useState 的函数式更新是通用能力，和 state 类型无关，不存在数字、布尔类型专属、字符串类型需要单独找特殊写法的情况。

你之前用到的两种写法本质逻辑完全一致：

• 数值更新：setCount(prev => prev + 1) 是拿到上一次最新的 count 值，做数值加法后返回新值
• 布尔值更新：setVisible(prev => !prev) 是拿到上一次最新的布尔值，做取反后返回新值

字符串类型的更新完全遵循相同规则：回调函数的入参就是当前最新的字符串 state，你只需要在回调里基于这个旧值处理，返回最终的新字符串即可。

常用代码示例 #

// 声明字符串类型state
const [msg, setMsg] = useState('hello');

// 1. 字符串拼接
const addSuffix = () => {
  setMsg(prevMsg => prevMsg + ' world'); // 执行后msg变为"hello world"
};

// 2. 字符串替换
const replaceContent = () => {
  setMsg(prevMsg => prevMsg.replace('hello', 'hi')); // 执行后msg变为"hi world"
};

// 3. 输入框实时同步值
const handleInput = (e) => {
  // 不需要依赖外层的msg变量，避免闭包拿到旧值
  setMsg(() => e.target.value);
};

// 4. 清空字符串
const resetMsg = () => {
  setMsg(() => '');
};

注意点 #

只要你更新 state 的逻辑依赖上一次的 state 结果，不管是什么类型，都推荐用函数式更新写法，可以避免闭包缓存旧 state 导致的更新不符合预期的问题，没有额外的类型限制。

内容的提问来源于stack exchange，提问作者Rodrigo Agustin