如何设置/更新从用户输入传递到React组件的prop ?

Question

我希望将对象数组中的值显示为scoreBoard，显示两名玩家在游戏中经过若干局后的得分。我希望把它们放在球员的不同排。衷心感谢。

下图显示了两组后的分数。我如何在DOM上的单独一行中打印每个玩家的分数?如:

player1Scores"; 4 8 12

player2Scores": 5 18 22

import React from "react"
import ReactDOM from "react-dom"
export default funtion App(){
const [players, setPlayers] = React.useState([{name: "Obi",       
age: 44, achievements: [12, 4, 16, 28]}, {name: "Chiadi", 
age: 47, achievements: [8, 10, 12, 21]}]);
const scores = players.map((player) => (player.achievements.map( (score, ind) => (<h2 key={ind}>{score}</h2>)
))
return ( {scores}  )
}
ReactDOM.render(<App />, document.getElementById("root"))

Answer 1

我通过传递数组player来解决这个问题。成就到一个组件，并通过它映射。

const [players, setPlayers] = React.useState([{name: "Obi",       
age: 44, achievements: [12, 4, 16, 28]}, {name: "Chiadi", 
age: 47, achievements: [8, 10, 12, 21]}]);
const scores = players.map((player) => (
<ScoreComponent scores ={player.achievements}/>)
)

然后我就可以映射到props.scores在子组件(ScoreComponent)中显示成绩或分数。">