遍歷數組元素時出錯

Question

我有以下數組 -

var arr= [ 
{
 id:1,
 name:"some name 1",
 email:"somename1@email.com"
},
{
 id:2,
 name:"some name 2",
 email:"somename2@email.com"
}
]

我想以一種方式迭代，我希望 output 作為字符串（半列分隔的名稱字符串）-

"some name 1;some name 2"

我以下面的方式迭代它 -

var name="";
arr.forEach( (item:any)=> {
name+=item.name+";";
});

但是我遇到了以下錯誤-

UncoughtError : Objects are not valid as react child (found object with keys {id , name , email}). If you want to render collection of child use array instead.

編輯：

return (
<span> {name} </span>
)

Answer 1

實現所需內容的一種簡單方法是使用Array.prototype.reduce()

您可以使用 ES6 嘗試以下代碼：

 const arr= [ { id:1, name:"some name 1", email:"somename1@email.com" }, { id:2, name:"some name 2", email:"somename2@email.com" } ] const newString = arr.reduce((preVal, newVal) => `${preVal} ${preVal? ";": ""} ${newVal.name} `, "") console.log(newString)

Answer 2

該錯誤通常意味着您正在嘗試渲染不直接是 React 組件的東西