React代码报错：Expected an assignment or function call 求助排查

嘿，这个错误我太熟了——咱们来一步步拆解问题所在，然后搞定它！

错误根源分析 #

你遇到的Expected an assignment or function call and instead saw an expression报错，直接原因是你在JSX里用了forEach，但forEach完全不适合用来生成JSX元素列表：

• forEach的作用是遍历数组执行回调，它没有返回值（最终返回undefined），所以你在forEach回调里写的<TableCell>{value}</TableCell>只是一个孤立的表达式，既没有被赋值给变量，也没有被作为函数返回值，ESLint自然会报错。
• 另外你的代码结构还有个小问题：原来的写法会为每个booking生成一个<TableBody>，这不符合表格组件的规范（一个表格应该只有一个<TableBody>，里面包含所有行）。

修正后的代码 #

我们把forEach换成map（map会返回新数组，刚好适合生成JSX元素列表），同时调整表格结构：

renderBody() {
  const { bookings } = this.props;
  
  // 处理 bookings 为空的情况
  if (bookings.length === 0) {
    return (
      <TableBody>
        <TableRow>
          <TableCell colSpan={Object.keys(bookings[0] || {}).length}>
            No bookings available
          </TableCell>
        </TableRow>
      </TableBody>
    );
  }

  return (
    <TableBody>
      {/* 遍历每个 booking 生成一行 */}
      {Object.keys(bookings).map((bookingKey) => (
        <TableRow key={bookingKey}>
          {/* 遍历当前 booking 的所有值，生成单元格 */}
          {Object.values(bookings[bookingKey]).map((value, cellIndex) => (
            <TableCell key={cellIndex}>{value}</TableCell>
          ))}
        </TableRow>
      ))}
    </TableBody>
  );
}

关键修改点说明 #

1. 用map替代forEach：map会遍历数组并返回包含所有<TableCell>的新数组，React可以直接渲染这个数组，完美解决表达式未被使用的问题。
2. 调整<TableBody>位置：现在整个表格只有一个<TableBody>，里面包含所有的<TableRow>，符合Material-UI（或其他UI库）的表格结构规范。
3. 添加key属性：React列表渲染要求每个子元素有唯一的key，避免渲染警告和性能问题（如果booking有唯一ID，优先用ID代替bookingKey或cellIndex）。
4. 补充空状态处理：当bookings为空时，返回友好的提示行，提升用户体验。

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