表达式预期和语法错误：Unexpected token jsx nextjs

Question

从我使用的数组中渲染表格

const Posts: NextPage = ({ posts}: any) => {
  return (
    <>
       .....
       <tbody>
         {
           posts.map((post: any) => {
           const _date = new Date(post.expiryDate);
           const _expiryDate = `${_date.getFullYear()}-${_date.getMonth()}-${_date.getDay()}`;
           return <tr key={post._id} onClick={() => showDetails(post)}>
             <td>{post.type}</td>
             <td>{_expiryDate}</td>
           </tr>;
        })
       }
       </tbody>

这很完美。单击任何行时，我会将发布数据传递给新组件以显示详细信息。

所以在我正在使用的详细信息页面上

<tr>

  <td className="table-key">Expiry</td>
  <td className="table-value">{post.expiryDate}</td>
  {
    const _date = new Date(post.expiryDate);
    const _expiryDate = `${_date.getFullYear()}-${_date.getMonth()}-${_date.getDay()}`;
    return <td className="table-value">{_expiryDate}</td>;
  }
</tr>

但这是在控制台上显示Expression expected

Syntax error: Unexpected token

在列表页面上，同样的表达方式有效吗？有什么问题？

Answer 1

在您的错误情况下，您在 JSX 中使用 {}，即 Embedding Expressions in JSX

在 jsx 中使用{} 类似于return({})，就像在普通 js 中一样，你不能在那里声明一个新变量，但使用另一个映射，过滤你可以。

这将引发错误，因为该表达式在 {} 中无效。

您需要在另一个函数中呈现您的代码块：

const renderExpiryDate = () => {
    const _date = new Date(post.expiryDate);
    const _expiryDate = `${_date.getFullYear()}-${_date.getMonth()}-${_date.getDay()}`;
    return <td className="table-value">{_expiryDate}</td>;
}

然后把它带到 JSX：

<tr>
  <td className="table-key">Expiry</td>
  <td className="table-value">{post.expiryDate}</td>
  {renderExpiryDate()}
</tr>

---

在第一种情况下，您不会收到类似的错误，因为您的表达式位于普通 javascript 的 map 函数中。