React页面输出问题：如何根据年龄正确展示指定文本？

核心问题点 #

• 年龄State类型错误：你把age初始化为对象{age: ''}，用对象和数字18比较永远返回false，所以一直触发"You are too young"。
• 未处理年龄输入更新：inputChanged函数只更新name的State，完全没管年龄输入框，导致age始终是初始空对象。
• 名称拼接错误：直接拼接name对象会显示Hello [object Object]，得取对象里的name属性。

修复后的完整代码 #

function HelloName() {
  // 把name和age改成单独的字符串状态，更直观
  const [name, setName] = React.useState('');   
  const [age, setAge] = React.useState('');
    
  const inputChanged = (event) => {
    const { name: inputName, value } = event.target;
    // 根据输入框的name属性区分更新对应的状态
    if (inputName === 'name') {
      setName(value);
    } else if (inputName === 'age') {
      setAge(value);
    }
  }

  const formSubmitted = (event) => {
    event.preventDefault();
    // 转成数字再比较，避免字符串和数字比较的坑
    const ageNum = Number(age);
    if (ageNum >= 18) {
      alert(`Hello ${name}`);
    } else {
      alert("You are too young");
    }
  }

  // 补上原代码缺失的表单渲染部分
  return (
    <form onSubmit={formSubmitted}>
      <input
        type="text"
        name="name"
        value={name}
        onChange={inputChanged}
        placeholder="输入姓名"
      />
      <input
        type="number"
        name="age"
        value={age}
        onChange={inputChanged}
        placeholder="输入年龄"
      />
      <button type="submit">提交</button>
    </form>
  );
}

修复说明 #

1. 把name和age改成独立的字符串State，避免对象类型带来的比较、取值麻烦。
2. 优化inputChanged函数，根据输入框的name属性分别更新状态，确保年龄输入能被正确捕获。
3. 判断年龄时转成数字类型，避免字符串与数字比较的潜在问题（比如字符串"9"和18比较会因为字符编码返回true）。
4. 补上原代码缺失的JSX渲染部分，保证组件能正常显示表单并接收用户输入。

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