React useState问题：如何将名称重置为"Friends"且不保留输入历史

你的代码逻辑本身是正确的，但出现的「点击按钮追加内容」「清空输入框状态不同步」问题，大概率是React严格模式重复渲染或者浏览器缓存了旧代码导致的，以下是针对性的修复和验证方法：

1. 确保状态更新的准确性 #

虽然你的changeToFriends写法没问题，但改用函数式状态更新可以彻底避免异步状态更新的潜在冲突，确保状态被直接覆盖：

const changeToFriends = () => {
  setName(() => 'Friends');
};

函数式更新会基于最新的状态快照进行修改，不会出现意外的叠加或延迟更新。

2. 验证输入框与状态的绑定 #

清空输入框状态未同步时，先排查以下几点：

• 确认输入框的type是text（你的代码已经正确设置）
• 检查是否有其他未察觉的代码在修改name状态
• 可以在handleChange里加日志，实时确认状态更新情况：

const handleChange = (e) => {
  const newValue = e.target.value;
  console.log('当前输入值:', newValue);
  setName(newValue);
};

3. 关闭React严格模式测试 #

React 18+的默认项目会开启严格模式，它在开发环境下会重复调用状态更新函数，可能导致你误以为是"追加"（实际是两次相同的状态更新，但视觉上出现异常）。可以暂时注释掉index.js里的<React.StrictMode>标签，测试是否恢复正常。

4. 完整修正后的代码 #

import React, { useState } from 'react';

function Greetings() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const changeToFriends = () => {
    setName(() => 'Friends');
  };

  return (
    <div>
      <h1>Hello {name || '...'}</h1>
      <input 
        type="text" 
        value={name} 
        onChange={handleChange} 
        placeholder="Enter your name" 
      />
      <button onClick={changeToFriends}>Change Name to Friends</button>
    </div>
  );
}

export default Greetings;

额外提醒 #

如果还是出现追加问题，一定要检查实际运行的代码是否和你提供的一致——比如是否不小心写成了setName(name + 'Friends')这种拼接逻辑，这种错误很容易被忽略。

内容的提问来源于stack exchange，提问作者Arun Kumar