用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});
}