唯一的“key”/table 应该有一个唯一的 `key` 属性，或者设置 `rowKey答案

【问题标题】：unique "key" / table should have a unique `key` prop, or set `rowKey唯一的“key”/table 应该有一个唯一的 `key` 属性，或者设置 `rowKey
【发布时间】：2020-05-31 09:56:16
【问题描述】：

问题：如何传递/创建和传递唯一键给单选按钮，我还有一个表组件，它接受数据（arra），它还说[antd: Table]表的dataSource中的每条记录都应该有一个唯一的@987654323 @prop，或设置 rowKey 。提前谢谢你。

    const userRoles = [
    {
        key: "ROLE_ADMIN",
        name: "Admin"
    },
    {
        key: "ROLE_USER",
        name: "User",
    }
];


class RoleUpdate extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            userRole: props.role,
        }
    }

    handleChange = (event) => {
        this.setState({
            userRole: {
                role: event.target.value
            }
        });
        this.props.onRoleChange(event.target.value);
    };

    render() {
        return (
            <Radio.Group value={this.state.userRole.role} onChange={this.handleChange}>
                {userRoles.map(role => {
                    return <Radio.Button value={role.key}>{role.name}</Radio.Button>
                })}
            </Radio.Group>

        )
    };

}

export default RoleUpdate;

<Table size={"middle"}
      columns={columns}
      dataSource={this.state.results}
                   />

【问题讨论】：

这能回答你的问题吗？ How to create unique keys for React elements?

标签： javascript reactjs key

【解决方案1】：

您必须将键属性传递给从循环或映射中返回的元素。假设 userRoles 具有唯一的 key 属性，它可以用作key={role.key} on Radio.Button 上的键

render() {
    return (
        <Radio.Group value={this.state.userRole.role} onChange={this.handleChange}>
            {userRoles.map(role => {
                return <Radio.Button key={role.key} value={role.key}>{role.name}</Radio.Button>
            })}
        </Radio.Group>

    )
};

对于表，您需要通过指定rowKey 属性来指定需要将数据中的哪个键作为键

<Table size={"middle"}
  columns={columns}
   rowKey={"id"} // specify any key which has unique value within this.state.resukts
  dataSource={this.state.results}
/>

【讨论】：

所以我需要以某种方式遍历数据数组并将例如电子邮件作为唯一键并分配给键道具？ rowKey={this.state.results.map()}...
如果您正在考虑向表中添加唯一键，那么不，您只需要指定数据中的哪个属性具有唯一值。例如说数据是userRoles，你将传递rowKey="key"作为userRoles中的key属性持有唯一键
但是在映射数据和渲染项目时，您需要将 key 属性传递给从映射返回的元素，并且该键属性可以是指定的任何唯一值，例如 key={item.key} 甚至是key={index} 在最坏的情况下
目前我有奇怪的行为，我有一种感觉是因为当前的控制台错误消息 -> 我有一个实时搜索，其中数据发生变化，每个人都有收音机，例如两个单选按钮，目前如果我找到第二行有人更改按钮的状态，当我再次搜索时，出现在第二行的人似乎突出显示了相同的选项，即使它是不同的人，抱歉废话解释
您可能正在根据索引存储状态。除非您显示相关代码，否则很难说

【解决方案2】：

您需要为.map()的每个元素添加key属性。

我通常的做法是使用(role, index) 选项，您可以添加如下内容：

<Radio.Group value={this.state.userRole.role} onChange={this.handleChange}>
  {userRoles.map((role, index) => {
     return <Radio.Button key={index} value={role.key}>{role.name}</Radio.Button>
  })}
</Radio.Group>

【讨论】：