gpt4 book ai didi

javascript - 渲染方法中独特的 "key"prop 警告 - ReactJS

转载 作者:行者123 更新时间:2023-12-02 14:26:30 25 4
gpt4 key购买 nike

我的应用程序有一条警告:数组或迭代器中的每个子项都应该有一个唯一的“key”属性。检查'SortableTable'的渲染方法听到的是我的SortableTable文件:

import React from 'react';
import {Link} from 'react-router';
import {v4 as uuid} from 'node-uuid';

export default class SortableTable extends React.Component {
render() {

return (
<table style={{width: '100%'}} className={this.props.className} id={this.props.id}>
<thead>
<tr>
{this.props.headers.map(this.generateHeaders)}
</tr>
</thead>
<tbody>
{this.props.children}
</tbody>
</table>
);
}

generateHeaders = (value) => {
if (Object.keys(value).length === 0) return
let sort, colspan
if(value.sort) {

let {query} = this.props;
let nQuery, title, icon, colspan = 1;
if(query.sort === value.sort && query.sortDirection === 'desc') {
nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'asc', page: 1})
title = 'asc';
icon = String.fromCharCode(0xe630)
} else {
nQuery = Object.assign({}, query, {sort: value.sort, sortDirection: 'desc', page: 1})
title = 'desc';
icon = String.fromCharCode(0xe62d)
}
sort = <Link to={this.props.link} query={nQuery} className="icon order active" title={title} data-icon={icon} />

}
let className = value.className ? value.className : ''
if(value.colspan) {
colspan = value.colspan
}
return <th className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th>
}

有人可以告诉我如何设置 key prop 来解决此警告吗?

最佳答案

这个想法是拥有一个具有唯一值的关键属性。您可以使用index, the second argument of Array#map callback :

generateHeaders = (value, index) => {
// ...
return <th key={index} className={className} colSpan={colspan}><span>{value.name}</span>{sort}</th>
}

或者,如果 value 对象具有像 id 这样的唯一属性,您也可以使用它。

关于javascript - 渲染方法中独特的 "key"prop 警告 - ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38201165/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com