我是 React 新手，我正在尝试用基本逻辑来解决这个问题。谁能帮帮我吗

Question

我正在尝试为团队设置状态，但我无法做到。

我想为每个团队设置单独的状态，而不使用任何高级逻辑。

我在代码中尝试了很多东西，但没有任何效果。单击按钮的团队的状态应该发生变化，其他团队保持不变。

const PointsTable = () => {
    const [teams] = 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) {
        var teamName = document.querySelector('button').value;
        var matches = prompt("Enter total matches played: ");
        var win = prompt("Enter total matches won: ");
        var lose = matches - win;
        var point = win * 2;

        teams[teamName].matchesPlayed = matches;
        teams[teamName].wins = win;
        teams[teamName].loses = lose;
        teams[teamName].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;

我正在尝试为团队设置状态，但我无法做到。

Answer 1

您的 useState() 挂钩用法是错误的。 你应该像这样初始化它：

 const [teams, setTeams] = useState({ 
         // stays the same
    });

然后使用 setTeams 来更改团队的值。

Answer 2

您对

useState

的使用不正确。

useState

返回一个包含状态对象和更新状态对象的“setter 方法”的数组。这允许通过 React 渲染生命周期更新状态对象。您无法像您尝试过的那样直接更新状态变量。

您应该使用 setter 方法，如下所示：

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 handleInput(teamName) {
    const matches = prompt("Enter total matches played: ");
    const win = prompt("Enter total matches won: ");
    const lose = matches - win;
    const point = win * 2;

    setTeams(prevTeams => ({
        ...prevTeams,
        [teamName]: {
            matchesPlayed: matches,
            wins: win,
            loses: lose,
            points: point
        }
    }));
}

JSX HTML 的简写版本如下所示：

return (
    <div>
        <button onClick={() => handleInput("CSK")}>Input CSK Data</button>
        <button onClick={() => handleInput("MI")}>Input MI Data</button>
        <button onClick={() => handleInput("KKR")}>Input KKR Data</button>
        <button onClick={() => handleInput("GT")}>Input GT Data</button>
    </div>
);

此外，我不会在此处使用

prompt

来更新值，而是创建一些处理新数据的 React 组件或 HTML 输入，可能作为表单字段或在模态中。