javascript - 如何更改状态中对象的属性？

Question

我已经使用 React 框架几个星期了，但我经常对新事物感到惊讶。我正在为一个小组项目制作一个游戏的登录/游戏大厅/服务器大厅。

我目前对状态有点困惑。到目前为止，为了改变我的状态，我一直在使用:

setState({stateProperty: newValue});

我感到困惑的原因是我有一个处于状态的数组，其中包含元素列表。每个元素都是屏幕上显示的一行，我需要更改该元素中的一个单词。该元素需要被网站的所有查看者看到，因此这些行必须保持状态。

问题是这个词是这个元素的属性。为了能够设置状态，我需要传递此元素的新版本，但我不能这样做，因为我需要使用不同的属性创建此元素的版本...我无法更改属性。

看来我得改变state的状态什么的？我该如何去做呢？

数组的属性以这种方式推送，我试图更改“GameLine”对象的“状态”，而“GameLine”是数组“children”中的元素之一:

children.push(
  <GameLine 
    players={allPlayers} 
    lobbyStateChange={this.lobbyStateChange.bind(this)}
    joinState={this.joinState.bind(this)} 
    joinAppears={this.joinAppears.bind(this)}
    handleLobbyChange={this.handleLobbyChange.bind(this)} 
    lobby={newLobbyName} 
    owner={owner} 
    type={newGameType} 
    difficulty={newDifficulty} 
    status={newStatus} 
    number={gamesAmount}
    key={"gameLineKey"+owner} 
    className="gamesGames"
  />
);

抱歉，如果这是一个不好的问题!感谢您提前的帮助!

Answer 1

Severiaan 的答案正是我一直在寻找的!非常感谢!

为 future 的读者重申我的问题:

这是我的程序的初始状态:

    this.state = {
        inLogin: true,
        inGameLobby: false,
        inLobbyCreate: false,
        currentGame: 0,
        message: "",
        allMessages: [],
        messageAmount: 0,
        games: 0,
        allGameLines: [],
        allGames: [],
        lobbyName: "",
        owner: "",
        gameType: "",
        difficulty: "",
        status: "",
        user: "",
        allUsers: [],
        userAmount: 0,
        selectedGame: "",
        buttonVisibility: "hidden",
        username: "",
        role: "",
        currentTab: "logTab",
        allLobbies: [],
        allLobbyPlayers: [],
        playersReady: [],
        allGameLobbyMessages: [],
    }

在我的网页上，每次有人创建“游戏大厅”时，都会创建一个“gameLine”，其他玩家可以单击该线来加入大厅。 “gameLine”将大厅中的玩家数量显示为“status”。我不确定如何更改“gameLine”的这个属性。

状态属性“allGameLines”是“gameLine”元素的列表，其中该元素(很复杂，不需要显示所有代码，不需要理解问题)将在以下情况下重新渲染:有人加入或离开大厅。

问题是“gameLine”元素有自己的属性。通常在编辑状态时，您会使用命令:

    setState({
            allGameLines: newAllGameLines,
    });

在这种情况下不能使用“setState”，因为我们无法创建新版本“newAllGameLines”，因为要创建新版本，我们需要更改属性“status”。

“Lukasz 'seVeriaan' Grela”拥有进入“allGameLines”并直接更改“状态”的完美解决方案。解决方案如下所示:

    lobbyStateChange(newGameStatus, allLobbyPlayers, jTerm){
        this.setState(prevState =>({
            inGameLobby: true,
            buttonVisibility: "hidden",
            allLobbyPlayers,
            allGameLines: {
                ...prevState.allGameLines,
                jTerm: {
                    props: {
                        status: newGameStatus,
                    }
                 }
             },
        }));
    }

谢谢大家的帮助!