如何更改处于状态的对象的属性？

Question

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

我对目前的状态有些困惑。 到目前为止，要更改我的状态，我一直在使用：

setState({stateProperty: newValue});

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

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

看来我必须更改状态或其他状态？ 我将如何去做呢？

数组的属性以这种方式推送，其中我试图更改“ 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的答案正是我想要的！ 非常感谢！

重申一下我的问题，对于以后的读者：

这是我程序的初始状态：

    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”将大厅中的玩家数量显示为“状态”。 我不确定如何更改“ 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,
                    }
                 }
             },
        }));
    }

谢谢大家的帮助！

Answer 2

您可以细粒度地更改状态，您必须复制未修改的状态，例如

this.state ={ prop1:”abc”,
prop2:{
    Sub1:”abc1”,
    Sub2:”def2”
}:

this.setState(prevState=>({
    prop2:{
        ...prevState.prop2,
        Sub2:”changed”
    }
});

这只会更改sub2。