React中users.map is not a function错误解决求助

错误原因 #

点击按钮后users变成了嵌套数组，因为setUsers([users, { name, salary }])是把原数组作为新数组的第一个元素，导致后续users不再是一维数组，自然无法调用map方法。

修正后的代码 #

import { useState } from "react";

function Test() {
  const [name, setName] = useState('');
  const [salary, setSalary] = useState('');
  const [users, setUsers] = useState([]);

  function Calculation() {
    // 使用扩展运算符展开原数组，追加新用户对象
    setUsers([...users, { name, salary }]);
    // 提交后清空输入框
    setName('');
    setSalary('');
  }

  return (
    <div className="container">
      <h3>Employee Salary Calculation</h3>

      <div className="form-group">
        <label>Employee Name</label>
        <input
          type="text"
          className="form-control"
          placeholder="Employee Name"
          value={name}
          onChange={(event) => {
            setName(event.target.value);
          }}
        />
      </div>

      <div className="form-group">
        <label>Salary</label>
        <input
          type="text"
          className="form-control"
          placeholder="Enter Salary"
          value={salary}
          onChange={(event) => {
            setSalary(event.target.value);
          }}
        />
      </div>

      <button type="button" onClick={Calculation} className="btn btn-primary mt-4">
        Submit
      </button>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Salary</th> {/* 修正表头错误，原显示为Email */}
          </tr>
        </thead>
        <tbody>
          {users.map((user, index) => (
            <tr key={index}> {/* 添加唯一key，消除React列表渲染警告 */}
              <td>{user.name}</td>
              <td>{user.salary}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Test;

关键修改点 #

• 修复数组更新逻辑：用[...users, { name, salary }]替代[users, { name, salary }]，通过扩展运算符展开原数组，保证users始终是一维数组，能正常调用map。
• 替换class为className：React中DOM元素的类名属性需用className，而非原生HTML的class。
• 实现受控输入框：给input添加value属性绑定状态，提交后清空输入框，提升交互体验。
• 修正表头内容：将错误的"Email"表头改为"Salary"，与表格内容对应。
• 添加map的key属性：给循环生成的<tr>添加唯一标识（此处用索引，实际项目建议用业务唯一ID），消除React警告。
• 设置状态初始值：给name和salary设置空字符串初始值，避免初始状态为undefined的潜在问题。

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