呈现为对象的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"