なぜこれがエラーをスローしているのか理解できません。
曲が存在するかどうかを確認したいのですが、それらはそれらの上にマップされますが、エラーが発生します。
export function SongsList({songs}) {
return (
<div className="pa3">
<h3>Your Songs: </h3>
<ul>
{songs && (
{songs.Map(song => <li>{song.name}</li>)}
)}
</ul>
</div>
)
}
私はこれを何度もやりましたが、今はうまくいきません、何かアイデアはありますか？
songs.Map（補足、mは小文字にする必要があります）を{}でラップしないでください。
変化する：
{songs && (
{songs.Map(song => <li>{song.name}</li>)}
)}
に：
{songs && (
songs.map(song => <li>{song.name}</li>)
)}
そしてそれはうまくいくでしょう。
更新
2つのコードサンプルの違いは何ですか？
React Docsによると：
JSXの中括弧内に有効なJavascript式を配置できます。たとえば、2 + 2、user.firstName、またはformatName（user）はすべて有効なJavaScript式です。
JSXも式であることに注意してください。
コンパイル後、JSX式は通常のJavaScript関数呼び出しになり、JavaScriptオブジェクトに評価されます。
2番目のコードサンプルでは、中括弧内に有効な式があります。
{songs && (
songs.map(song => <li>{song.name}</li>)
)}
曲がnull / undefined（falseは有効な式）の場合、式をfalseと評価するか、JSX式（これも有効な式）を評価します。
最初のコードサンプルの何が問題になっていますか？
以前と同様に、曲がnull / undefinedの場合、式をfalseと評価します。
しかし、曲がnull / undefinedでない場合は、奇妙な生き物を評価しようとします。
{songs.Map(song => <li>{song.name}</li>)}
中括弧で囲まれているという事実は、reactがオブジェクトであることを示しています（オブジェクトはReact Childとして有効ではありませんが、それは別のことです）。Javascriptオブジェクトはキー/値の構造を持つ必要があります（キーは文字列です）：{キー：値、...}
オブジェクトは有効なオブジェクトではなく、キーと値のペアの構文がありません。
これは有効なJavaScript式ではないため、このエラーが発生します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加