当我使用“=>”时,为什么我在 React Component Class 中得到 "Unexpected token. Did you mean `{'>'}` or `>`?ts"-

when I use "=>" Why am I getting "Unexpected token. Did you mean `{'>'}` or `>`?ts" in React Component Class-

我看过一些类似的问答,但还是想不通。我是初学者。 当我在 React Component Class 中使用 => 时,它无法被识别。所以我得到“员工”未定义。

这是 ListEmployeeComponent:

class ListEmployeeComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      employees: [],
    };
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Employees List</h2>

        <div className="row">
          <table className="table table-striped taable-bordered">
            <thead>
              <tr>
                <th>Employee First Name</th>
                <th>Employee Last Name</th>
                <th>Employee Email ID</th>
                <th>Actions</th>
              </tr>
            </thead>

            <tbody>
              this.state.employees.map((employee) => (
                <tr key={employee.id}>
                  <td>{employee.firstname}</td>
                  <td>{employee.lastname}</td>
                  <td>{employee.emailId}</td>
                </tr>
              ))
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}
export default ListEmployeeComponent;

这是错误的屏幕截图。请帮我解决这个问题或给我任何建议,以便我更好地理解它。

screenshot

感谢您的宝贵时间。

您在 jsx 中缺少 JS 语句周围的花括号:

...
{this.state.employees.map((employee) => (
  <tr key={employee.id}>
    <td>{employee.firstname}</td>
    <td>{employee.lastname}</td>
    <td>{employee.emailId}</td>
  </tr>
))}
...