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

songs.Map（注意，m应该为小写）不应用{}包裹。
更改：

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

收件人：

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

它将起作用。

更新

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

根据React Docs：

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

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

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

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

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

如果歌曲为空/未定义（false是有效的表达式），我们将表达式评估为false，或者评估JSX表达式（也是有效的表达式）。

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

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

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

它用大括号括起来的事实告诉react它是一个对象（并且该对象作为React Child无效，但这是另一回事）。 Javascript对象应具有键/值的结构（键是字符串）： {key：value，...}
我们的对象不是有效的对象，它没有 key：value 对语法。
那不是有效的javascript表达式，这就是为什么出现此错误的原因。

功能组件错误：解析错误：意外的令牌，预期为“，”

1 个答案: