React中如何为复杂对象设置状态？IPL积分表状态更新求助

你的代码存在三个核心问题： #

1. 直接修改state对象：React无法检测到对state的直接修改，必须通过setState方法更新状态。
2. 错误获取点击的球队名称：你用document.querySelector('button').value会拿到页面第一个按钮的值，而不是点击的目标按钮的球队名，还覆盖了传入的teamName参数。
3. 未转换数据类型：prompt返回的是字符串，直接赋值会导致数字计算异常（比如matches - win会变成字符串拼接）。

修改后的完整代码 #

const PointsTable = () => {
    const [teams, setTeams] = useState({
        CSK: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
        MI: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
        KKR: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
        GT: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 }
    });

    function input(teamName) {
        const matches = prompt("Enter total matches played: ");
        const win = prompt("Enter total matches won: ");
        // 转成数字类型，避免计算错误
        const numMatches = Number(matches);
        const numWin = Number(win);
        const lose = numMatches - numWin;
        const point = numWin * 2;

        // 使用setTeams更新状态，保持其他球队数据不变
        setTeams(prevTeams => ({
            ...prevTeams,
            [teamName]: {
                ...prevTeams[teamName],
                matchesPlayed: numMatches,
                wins: numWin,
                loses: lose,
                points: point
            }
        }));
    }

    return (
        <div>
            <h2>IPL Points Table</h2>
            <table border={1} cellPadding={20} cellSpacing={0}>
                <thead>
                    <tr>
                        <th></th>
                        <th>Total Matches Played</th>
                        <th>Wins</th>
                        <th>Loses</th>
                        <th>Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>CSK</td>
                        <td>{teams.CSK.matchesPlayed}</td>
                        <td>{teams.CSK.wins}</td>
                        <td>{teams.CSK.loses}</td>
                        <td>{teams.CSK.points}</td>
                        <td><button value='CSK' onClick={() => input("CSK")}>CSK</button></td>
                    </tr>
                    <tr>
                        <td>MI</td>
                        <td>{teams.MI.matchesPlayed}</td>
                        <td>{teams.MI.wins}</td>
                        <td>{teams.MI.loses}</td>
                        <td>{teams.MI.points}</td>
                        <td><button value='MI' onClick={() => input("MI")}>MI</button></td>
                    </tr>
                    <tr>
                        <td>KKR</td>
                        <td>{teams.KKR.matchesPlayed}</td>
                        <td>{teams.KKR.wins}</td>
                        <td>{teams.KKR.loses}</td>
                        <td>{teams.KKR.points}</td>
                        <td><button value='KKR' onClick={() => input("KKR")}>KKR</button></td>
                    </tr>
                    <tr>
                        <td>GT</td>
                        <td>{teams.GT.matchesPlayed}</td>
                        <td>{teams.GT.wins}</td>
                        <td>{teams.GT.loses}</td>
                        <td>{teams.GT.points}</td>
                        <td><button value='GT' onClick={() => input("GT")}>GT</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

export default PointsTable;

关键修改说明： #

• 给useState添加了更新函数setTeams，这是React更新state的标准方式。
• 移除了错误的document.querySelector逻辑，直接使用点击按钮时传入的teamName参数。
• 将prompt返回的字符串转成数字类型，确保计算结果正确。
• 使用展开运算符(...)复制原有的teams对象和目标球队的数据，只更新当前点击球队的状态，其他球队数据保持不变，符合你要的"独立状态"需求。

内容的提问来源于stack exchange，提问作者Mihir Makwana