呈現爲對象的React元素

Question

元素「not__uploaded」呈現爲[object Object]。我對React相當陌生，我似乎無法弄清楚這裏有什麼問題。

'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個對象的數組。這個包含2個對象的數組反過來在一個字符串模板內呈現，這基本上是將數組強制轉換爲一個字符串。被強制轉換爲字符串的數組的默認行爲是在該數組上調用toString()。數組的默認toString()實現調用Array.join(',')。這就是爲什麼你的對象會以逗號字符的形式出現。

最後，數組內的兩個對象也被強制爲字符串值（每個對象都調用toString()）。顯然你的對象沒有一個toString()實現，所以javascript只是默認爲"object Object"