React useState使用问题：获取输入值并点击按钮新增<p>元素

核心问题分析 #

你遇到的“Name和surName未定义”错误，通常是状态变量命名不匹配、未通过useState正确初始化，或者使用时写错了变量名（比如大小写错误，React里变量名一般用小驼峰，比如name而非Name）。

完整实现代码 #

import { useState } from 'react';

function NameInput() {
  // 初始化姓名、姓氏状态变量，以及存储已提交内容的数组
  const [name, setName] = useState('');
  const [surName, setSurName] = useState('');
  const [submittedList, setSubmittedList] = useState([]);

  // 姓名输入框的内容变更处理
  const handleNameInput = (e) => {
    setName(e.target.value);
  };

  // 姓氏输入框的内容变更处理
  const handleSurNameInput = (e) => {
    setSurName(e.target.value);
  };

  // 按钮点击提交逻辑
  const handleSubmit = () => {
    // 校验输入不为空
    if (name.trim() && surName.trim()) {
      // 将新的姓名组合添加到列表，同时清空输入框
      setSubmittedList(prev => [...prev, `${name} ${surName}`]);
      setName('');
      setSurName('');
    }
  };

  return (
    <div>
      <div>
        <label>姓名：</label>
        <input
          type="text"
          value={name}
          onChange={handleNameInput}
          placeholder="请输入姓名"
        />
      </div>
      <div>
        <label>姓氏：</label>
        <input
          type="text"
          value={surName}
          onChange={handleSurNameInput}
          placeholder="请输入姓氏"
        />
      </div>
      <button onClick={handleSubmit}>提交</button>
      {/* 渲染所有已提交的内容 */}
      <div>
        {submittedList.map((fullName, index) => (
          <p key={index}>{fullName}</p>
        ))}
      </div>
    </div>
  );
}

export default NameInput;

关键细节说明 #

• 状态变量规范：用小驼峰命名状态变量（name、surName），避免和JSX元素、内置变量冲突，也符合React编码习惯。
• 受控组件逻辑：输入框通过value绑定状态，onChange触发状态更新，保证输入框值和React状态实时同步。
• 列表渲染注意：用数组存储提交内容，通过map渲染<p>元素，每个元素需要添加唯一key（示例用索引，实际项目建议用业务唯一ID）。
• 不可变状态更新：更新数组状态时用展开运算符创建新数组，不直接修改原状态，遵循React状态不可变原则。

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