为什么我的输入 onChange 事件会更改对象数组中的多个状态值？

Question

我正在构建一个用户流程，以允许用户输入他们玩过的视频游戏的统计数据。我的 react 组件呈现了一个类似于表格的 excel，他们可以在其中手动输入统计数据（就像一个 excel 电子表格，其中 y 轴是一列球员，x 轴是每个球员的统计数据。当我更新特定玩家的特定统计数据时，每个玩家对该特定统计数据的统计值也会发生变化。例如，如果我将球员 A 更新为 5 个进球，则团队中的每个其他球员也将有 5 个进球。这不应该发生。首先，我初始化一个 matchStats 对象：initializeMatchStats = (numGames) => {    const {matchInfo} = this.props;    const gameArray = new Array(numGames).fill('');    const matchStats = gameArray.map((game, i) => {        let statsWithKeys = {};        let gameInfo = {};        matchInfo.circuitStats.map(key => {            statsWithKeys[key.toLowerCase()] = 0        })            const players = new Array(matchInfo.playersAllowedInGame).fill({                stats: statsWithKeys            }).map(p => {                return {                    ...p,                    dropdownOpen: false,                    id: Math.random().toString(36)                }            })            gameInfo = {                players,                index: i + 1            }        return gameInfo    })    this.setState({matchStats, numGames, numGamesModalOpen: false, uploadManually: true}, () => console.log('matchStats: ', matchStats))}然后，我更新 matchStats 对象，因为它被用户更改：updateStatsManually = (val, player, game, header, e) => {        e.preventDefault();        const {matchStats} = this.state;        // matchStats is an array of games in each match. A game is made up of the players (and their respective stats) in the game.        const { matchInfo } = this.props;        const gameToUpdate = matchStats.find(g => g.index === game.index)我希望当我更改给定玩家的一项统计数据的输入值时，它只会更改该特定玩家的统计数据。但是，它会为每个玩家改变它。我已经搞砸了一段时间，并努力找出我做错了什么。我认为这可能与如何在 .map 函数中呈现输入有关，但我尝试分离测试输入，结果是相同的。任何帮助表示赞赏！

Answer 1

假设您有 5 名玩家的限制。在这种情况下，这个：

         const players = new Array(matchInfo.playersAllowedInGame).fill().map(p => {

                return {

                   stats: statsWithKeys,

                   dropdownOpen: false,

                   id: Math.random().toString(36)

                }

            })

没有像您期望的那样创建 5 个 'statsWithKeys'，而是 5 个对相同 'statsWithKeys' 的引用。

解决此问题的最佳方法是直接在对象本身上使用扩展运算符：

         const players = new Array(matchInfo.playersAllowedInGame).fill().map(p => {

                return {

                   stats: { ...statsWithKeys },

                   dropdownOpen: false,

                   id: Math.random().toString(36)

                }

            });