使用映射函数创建对象，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});
}

我试图使用map，但看起来我无法将数组元素作为对象键，即"；测试用户1"；等等，但是得到了"；昵称"；相反(见Firefox DevTools插件中的"组件"选项卡(

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

我触发我的功能如下：

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

如何解决？顺便说一句：当我在setState之后运行console.log(this.state.buttonList);时，我仍然看到空数组，因为它是在初始状态下创建的。为什么？

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