如何为初始化数组中的每个项目设置键名

Question

我正在尝试将数组 accessRoleDisplay 初始化为未知数量的值，并为数组中的每个项目指定一个键“名称”，以便我可以使用反应表并将值添加到 accessor

所以它看起来像这样

0: {name:xyz} 1: {name:xyz} 2: {name:xyz} 。 . .等等

这是我的方法accessRoleDisplay:[{name:''}]，但这只是将第一项设置为名称键，其余项不设置。任何反馈表示赞赏！

class MainCard extends Component {
    state = {
        accessRoleDisplay:[{name:''}],
    }

    handleChange = (tab) => {

        window.alert(`Tab changed to: ${tab}`);
    };

retrieveRoleAccess() {
    for (let i = 0; i < this.state.accessRoleData.length; i++) {
        for(let j=0; j<this.state.resourcesResponseData.length; j++) {
            if(this.state.accessRoleData[i].resource_id === this.state.resourcesResponseData[j].id)
            { 
                this.setState((prevState) => ({
                    accessRoleDisplay: [...prevState.accessRoleDisplay, this.state.resourcesResponseData[j].name]

                }));
               
            }
        }
    }
    console.log('this is role access display: ',this.state.accessRoleDisplay )
}
   
    async componentDidMount() {
     this.retrieveRoleAccess();
        ...
    }
    shouldComponentUpdate(nextProps, nextState) {
        return nextState !== this.state;
    }


    render() {


if (this.props.cardHandle) {
            return null
        }
        else {
            if (this.props.sendOptionSelected === 'Role') {
                
                return (
                    <Card mr={'0px'}>
                        <Tabs defaultActiveTab="Members" onChange={this.handleChange} >
                            {/* Group of tabs */}
                            <Tabs.Tab label="Members">Members</Tabs.Tab>
                            <Tabs.Tab label="Access">Access</Tabs.Tab>

                            {/* Tab panels */}
                            <Tabs.Panel label="Members">
                                <Table
                                    data={Array.isArray(this.state.outputRoleMembers) ? this.state.outputRoleMembers : [this.state.outputRoleMembers]}
           

                     defaultPageSize={[this.state.outputRoleMembers].length}
                                columns={
                                    [

                                        {
                                            Header: 'Fisrt Name',
                                            accessor: 'first_name'
                                        },
                                        {
                                            Header: 'Last Name',
                                            accessor: 'last_name'
                                        }

                                    ]
                                }
                                sortable={false}
                                resizable={false}
                                showPagination={false}
                                onSortedChange={() => { }}
                            />
                        </Tabs.Panel>
                        <Tabs.Panel label="Access">
                            <Table
                                data={Array.isArray(this.state.accessRoleDisplay) ? this.state.accessRoleDisplay : [this.state.accessRoleDisplay]}
                               
                                defaultPageSize={this.state.accessRoleDisplay.length}

                                columns={
                                    [
                                        {
                                            Header: 'Resource Name',
                                            //accessor: Need a key value here
                                        }
                                    ]
                                }
                                sortable={false}
                                resizable={false}
                                showPagination={false}
                                onSortedChange={() => { }}
                            />
                        </Tabs.Panel>
                    </Tabs>
                </Card>
            )
        }
}}}

const mapStateToProps = state => {
    return {
        roles: state.roles.item,
        users: state.users,
        permissions: state.permissions,
        resources: state.resources
    }
}
export default connect(mapStateToProps, { getComponentById, fetchComponent })(MainCard);

Answer 1

您可以使用 javascript 数组来做到这一点：

accessRoleDisplay: Array(size).fill( {name: 'xyz'} ),

这将在每个索引处使用对象{name: 'xyz'} 初始化一个长度为size 的数组

Answer 2

根据文档

访问器：字符串 |功能

必需 此字符串/函数用于为您的列构建数据模型。访问器返回的数据应该是原始的和可排序的。如果传递了一个字符串，则将通过该键在原始行上查找该列的值，例如。如果您的列的访问器是 firstName，那么它的值将从 row['firstName'] 中读取。您还可以使用诸如 info.hobbies 甚至 address[0].street 之类的访问器指定深度嵌套的值。如果传递了一个函数，则将使用此访问器函数在原始行上查找列的值，例如。如果您的列的访问器是 row => row.name，则其值将通过将行传递给此函数并使用结果值来确定。

它接受字符串或函数，但请确保设置了 id，您可以对行执行任何操作，例如 row.attrbuiteName === null ？ “没什么”：row.attrbuiteName

{
     id:'name',
     Header: "Resource Name",
     accessor: row => row.attrbuiteName
     }

Answer 3

迭代给定的数组以生成键值对

var countries = ['Canada','Us','France','Italy'];
let obj = [];
for (var index in countries) {
    // don't actually do this
    obj.push({
        name: `name ${index}`,
        val: countries[index]
    });
}
obj.map((item) => item.name+ ' : ' + item.val); 

输出 - 键：名称值：val

0: "名称 0：加拿大"

1: "名字 1：我们"

2: "名称 2：法国"

3: "名称 3：意大利"