React keys need to be on the outer-most returned element from the mapping.
{musics && musics.map((name, i)=>{
return(
<Fragment key={i}>
//it does not render the third array properly
<li>
<button onClick={play} value={name}>Play</button>
{name}
</li>
</Fragment>)
})}
Notice here that in order to do this the react fragment shorthand is incompatible, you must use the Fragment
component. Or since there is only a single element the Fragment
is mostly useless, remove it and place the key on the li
where it was.
{musics && musics.map((name, i)=>{
return(
<li key={i}>
<button onClick={play} value={name}>Play</button>
{name}
</li>)
})}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…