オブジェクトとしてレンダリングされたリアクタンス要素

Question

要素 "not_uploaded"は、[オブジェクトオブジェクト]としてレンダリングされます。私はかなり反応していて、何が間違っているのか分からないようです。

'responseRecieved'は、API呼び出しが行われたかどうかを追跡するブール値です。

ce('div', { 
    className: 'response__done' 
}, 
ce('p', { 
    className: '' 
}, 'Upload results: '), 
`${responseRecieved ? 
    response.not_uploaded.map(({ msg, post_category }) => 
       ce('div', {className: 'not__uploaded clearfix'}, 
        ce('p', {className: ''}, 
        msg, 
        ' for post with', 
        post_category[0], 
       ), 
       )) 
      : ''}` 
) 

Answer 1

`${responseRecieved ? 
 
    response.not_uploaded.map(({ msg, post_category }) => 
 
       ce('div', {className: 'not__uploaded clearfix'}, 
 
        ce('p', {className: ''}, 
 
        msg, 
 
        ' for post with', 
 
        post_category[0], 
 
       ), 
 
       )) 
 
      : ''}`

このコード全体片は `テンプレート文字列内にラップされるため、最終結果は文字列になります。

response.not_uploaded.mapは、配列を返すようにバインドされています。質問からのあなたの現在の出力を判断して、2つのオブジェクトinsdieを持つ配列を返します。 2つのオブジェクトを持つこの配列は、基本的に配列を文字列に強制する文字列テンプレート内でレンダリングされます。文字列に強制的に配置されている配列のデフォルトの動作は、その配列上のtoString()の呼び出しです。配列のデフォルトのtoString()実装では、Array.join(',')が呼び出されます。これは、オブジェクトがカンマ文字で区切られた文字列として出てくる理由です。

最後に、配列内の両方のオブジェクトも文字列値に強制されます（toString()が呼び出されます）。明らかにあなたのオブジェクトのいずれもtoString()の実装を持っているので、javascriptはデフォルトで"object Object"になります