React技术问询：从用户输入更新组件Props及玩家分数分行展示

核心逻辑是由父组件维护状态，将状态作为prop传递给子组件，通过用户输入事件更新父组件状态，从而间接更新子组件的prop，具体实现步骤：

• 1. 在父组件中定义状态变量，存储用户输入的值
• 2. 将该状态以prop形式传递给目标子组件
• 3. 给输入元素绑定onChange事件，监听输入并更新父组件状态
• 4. 状态更新后，React自动重新渲染子组件，新的prop值生效

示例代码：

// 子组件：接收并展示prop值
function ScoreDisplay({ score }) {
  return <div>当前分数：{score}</div>;
}

// 父组件：处理用户输入并更新prop
export default function App() {
  const [inputScore, setInputScore] = React.useState("");

  const handleInput = (e) => {
    setInputScore(e.target.value);
  };

  return (
    <div>
      <input 
        type="number" 
        value={inputScore} 
        onChange={handleInput}
        placeholder="输入分数"
      />
      <ScoreDisplay score={inputScore} />
    </div>
  );
}

你的代码存在语法错误（function拼写错误、map方法括号未闭合、return格式错误），且当前逻辑会把每个分数单独渲染为<h2>，导致所有分数堆叠。要实现每位玩家分数单独成行，需为每个玩家渲染独立容器，将其所有分数放在同一行内。

修复优化后的代码：

import React from "react"
import ReactDOM from "react-dom"

export default function 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 scoreBoard = players.map((player, idx) => (
        <div key={idx} style={{margin: "8px 0"}}>
            <strong>{player.name}的分数：</strong>
            {/* 将分数数组转为空格分隔的字符串 */}
            {player.achievements.join(" ")}
        </div>
    ))

    return <div>{scoreBoard}</div>
}

ReactDOM.render(<App />, document.getElementById("root"))

关键调整：

• 修复原代码的语法错误
• 外层map遍历每个玩家，用<div>作为每行的容器
• 使用join(" ")将分数数组转为空格分隔的字符串，实现同行展示
• 为每行设置唯一key（若玩家有唯一ID，建议用ID替代索引）

如果需要给单个分数加样式，也可以用内层map包裹：

// 替换scoreBoard的内层逻辑
<div key={idx} style={{margin: "8px 0"}}>
    <strong>{player.name}的分数：</strong>
    {player.achievements.map((score, sIdx) => (
        <span key={sIdx} style={{margin: "0 4px"}}>{score}</span>
    ))}
</div>

内容的提问来源于stack exchange，提问作者Mazi Chiadi