Question

我一直在使用React框架几周，但我经常对新事物感到惊讶。我正在为一个团队项目制作的游戏的登录/游戏大厅/服务器大厅工作。

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

setState({stateProperty: newValue});

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

问题是这个词是这个元素的属性。为了能够设置状态我需要传递这个元素的新版本，但是我不能这样做，因为我需要用不同的属性制作这个元素的版本......我不能改变属性。

似乎我必须改变国家的状态或什么？我该怎么做呢？

以这种方式推送数组的属性，我试图改变“GameLine”对象的“status”，而“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: [],
    }

在我的网页上，每当有人创建游戏大厅时，“游戏线”就会出现。创建其他玩家可以点击以便能够加入大厅。＆＃39; gameLine＆＃39;将大厅中的玩家数量显示为＆＃39; status＆＃39;。我不确定如何更改“游戏线”的这个属性。

州财产＆＃39; allGameLines＆＃39;是一个游戏线的列表＆＃39;元素，其中元素（复杂且不必显示所有代码，不需要理解问题）将在有人加入或离开大厅时重新呈现。

问题在于游戏线＆＃39; element有自己的属性。通常在编辑状态时，您将使用命令：

    setState({
            allGameLines: newAllGameLines,
    });

＆＃39;的setState＆＃39;在这种情况下无法使用，因为我们无法创建新版本＆＃39; newAllGameLines＆＃39;因为要创建新版本，我们需要更改属性＆＃39; status＆＃39;。

＆＃34; Lukasz＆＃39; seVeriaan＆＃39;格雷拉＆＃34;有一个完美的解决方案进入allGameLines＆＃39;和改变状态＆＃39;直。解决方案看起来像：

    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。

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

2 个答案: