遍历数组元素时出错

Question

I have below array -

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

I want to iterate in a way that, I want output as string (semi colun separated name string)-

"some name 1;some name 2"

I iterated it in below manner -

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

But I am getting below error -

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.

EDIT:

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

Answer 1

An easy way to implement what you're looking for is by using Array.prototype.reduce()

You can try out the following code by using 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

The error usually means you're trying to render something that's not directly a React component