用map函數創建對象，currentValue作為對象鍵

Question

在我的 ReactApp 中，我保留了用戶的狀態列表（從后端 API 獲取）。 它被稱為“currentUsers”。

class Lobby extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentUsers: ["TestUser1", "TestUser2"],
            buttonList: [],
        }
    }

我想填充 buttonList 以擁有對象數組，其中數組將如下所示（示例）：

[{
"TestUser1": {
    "inviteButtonValue": "Invite",
    "chatButtonValue": "Chat"
          }
},
{"TestUser2": {
    "inviteButtonValue": "Invite",
    "chatButtonValue": "Chat"
          }
}]

有我的主要功能。

    produceButtonValues = (currentUsersList) => {
        let inputList = currentUsersList
            .map( (nickname) => {
                    return {
                        nickname: {
                            "inviteButtonValue": "Invite",
                            "chatButtonValue": "Chat"
                        }
                    };
                }
            );
        this.setState({buttonList: inputList});
    }

我嘗試使用地圖，但看起來我無法將數組元素作為對象鍵，即“TestUser1”等，但得到了“昵稱”（在 Firefox DevTools Add-on 的“組件”選項卡中看到）

...
{nickname: {
    "inviteButtonValue": "Invite",
    "chatButtonValue": "Chat"
          }
}
...

我觸發我的功能如下：

    componentDidMount() {
        this.produceButtonValues(this.state.currentUsers);

如何解決？ 順便說一句：當我運行console.log(this.state.buttonList); 就在setState之后，我仍然看到空數組，因為它是在初始狀態下創建的。 為什么？

Answer 1

它被稱為Property accessors

你像這樣使用它：

currentUsersList.map(nickname => ({
    [nickname]: {
       inviteButtonValue: Invite,
       chatButtonValue: Chat
    }
});

屬性訪問器
計算屬性名稱

Answer 2

你正在尋找這個：

produceButtonValues = (currentUsersList) => {
        let inputList = currentUsersList
            .map( (nickname) => {
                    return {
                        [nickname]: {
                            "inviteButtonValue": "Invite",
                            "chatButtonValue": "Chat"
                        }
                    };
                }
            );
        this.setState({buttonList: inputList});
    }

要將變量用作對象鍵的值，您需要用[]包裹它

Answer 3

您可以使用字符串作為鍵而不是變量名鍵。 在這種情況下，您可以使用模板字符串來強制執行字符串的鍵

例如：

produceButtonValues = (currentUsersList) => {
  let inputList = currentUsersList.map( nickname => {
    return {
      `${nickname}`: {
        "inviteButtonValue": "Invite",
        "chatButtonValue": "Chat"
      }
    };
  });

  this.setState({buttonList: inputList});
}