Javascript 使用map函数创建对象，currentValue作为对象键

在我的ReactApp中，我保留用户的状态列表（从后端API获取）。它被称为“当前用户”

我希望填充buttonList以获得对象数组，其中数组将如下所示（示例）：

这是我的主要职能

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

我尝试使用map，但看起来我无法获取数组元素作为对象键，例如“TestUser1”等，而是获得了“昵称”（见Firefox DevTools加载项中的“组件”选项卡）

我按如下方式触发我的函数：

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

如何解决？

---

顺便说一下：当我运行

console.log（this.state.buttonList）时

在

setState

之后，我仍然看到空数组，因为它是在初始状态下生成的。为什么？

您正在寻找：

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

---

要将变量用作对象键的值，您需要使用

[]

将其包装起来，以查找以下内容：

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

---

要使用变量作为对象键的值，您需要使用

[]

将其包装，您可以使用字符串作为键，而不是变量名键。 在这种情况下，您可以使用模板字符串来强制执行用于生成字符串的键

例如：

produceButtonValues=（currentUsersList）=>{
让inputList=currentUsersList.map（昵称=>{
返回{
`${昵称}`:{
“邀请按钮值”：“邀请”，
“聊天按钮值”：“聊天”
}
};
});
this.setState（{buttonList:inputList}）；
}

您可以使用字符串作为键，而不是变量名键。 在这种情况下，您可以使用模板字符串来强制执行用于生成字符串的键

例如：

produceButtonValues=（currentUsersList）=>{
让inputList=currentUsersList.map（昵称=>{
返回{
`${昵称}`:{
“邀请按钮值”：“邀请”，
“聊天按钮值”：“聊天”
}
};
});
this.setState（{buttonList:inputList}）；
}

它被称为

属性访问器

您可以这样使用它：

currentUsersList.map（昵称=>({
[昵称]：{
inviteButton值：Invite，
聊天按钮值：聊天
}
});

---

它被称为

属性访问器

您可以这样使用它：

currentUsersList.map（昵称=>({
[昵称]：{
inviteButton值：Invite，
聊天按钮值：聊天
}
});

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

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