功能组件错误：分析错误：意外的令牌，预期的","

Question

我不明白为什么这会引发错误。

我想检查歌曲是否存在，它们映射在它们上面，但我收到错误。

export function SongsList({songs}) {
return (
<div className="pa3">
<h3>Your Songs: </h3>
<ul>
{songs && (
{songs.Map(song => <li>{song.name}</li>)}
)}
</ul>
</div>
)
}

我已经做过很多次了，但现在它不起作用，有什么想法吗？

Answer 1

歌曲。地图(旁注，m 应该是小写(不应该用 {} 换行。
改变：

{songs && (
{songs.Map(song => <li>{song.name}</li>)}
)}

自：

{songs && (
songs.map(song => <li>{song.name}</li>)
)}

它会起作用。

---

更新

这两个代码示例之间有什么区别？

根据 React Docs：

您可以将任何有效的 Javascript 表达式放在大括号内 JSX.例如，2 + 2、user.firstName 或 formatName(user( 都是 有效的 JavaScript 表达式。

您应该注意，JSX 也是一个表达式：

编译后，JSX 表达式成为常规的 JavaScript 函数 调用并评估 JavaScript 对象。

在第二个代码示例中，我们在大括号内有一个有效的表达式：

{songs && (
songs.map(song => <li>{song.name}</li>)
)}

如果歌曲为 null/undefined(false 是有效表达式(，我们将表达式评估为 false，或者我们评估 JSX 表达式(这也是一个有效表达式(。


第一个代码示例有什么问题？

如果歌曲为 null/未定义，我们将表达式评估为 false，就像以前一样。
但是，如果歌曲不是空/未定义的，我们尝试评估一个奇怪的生物：

{songs.Map(song => <li>{song.name}</li>)}

它用大括号包裹的事实告诉 react 它是一个对象(对象作为 React Child 无效，但那是另一回事(。 Javascript 对象应该具有键/值的结构(键是一个字符串(：{键：值，...}
我们的对象不是有效的对象，它没有键：值对语法。
这不是一个有效的javascript表达式，这就是你收到此错误的原因。