Javascript React.js-列表中的每个子项都应该有一个唯一的；“关键”；道具

我在应用程序中遇到了“列表中的每个孩子都应该有一个唯一的”key“prop”错误。我可以打印表格，但我不确定为什么它会给我这个错误，因为我为列表中的每个项目提供了一个唯一的ID

我也尝试过在我的表头中添加一个键属性，但这并不能修复错误

如有任何意见，将不胜感激

客户组件

export default class Customers extends Component {
    constructor(props) {
        super(props);
        this.state = {
            records: [],
            model: 'Customers',
            columns: ['First Name', 'Last Name', 'Address']
        }
    }

    componentDidMount = () => {
        this.getAllRecords();
    }

    getAllRecords = () => {
        axios.get('api/Customers')
            .then((result) => {
                this.setState({ records: result.data })
                console.log(this.state.records);
            })
            .catch((error) => {
                alert(error);
                console.log(error);
            });
    }

    render() {
        return (
            <div>
                <RecordsTable
                    model={this.state.model}
                    columns={this.state.columns}
                    records={this.state.records}
                    reload={this.getAllRecords}
                />
            </div>
        )
    }
}

导出默认类客户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
记录：[]，
模型：“客户”，
列：[“名字”、“姓氏”、“地址”]
}
}
componentDidMount=（）=>{
这是.getAllRecords（）；
}
getAllRecords=（）=>{
axios.get（'api/客户'）
。然后（（结果）=>{
this.setState（{records:result.data}）
console.log（this.state.records）；
})
.catch（（错误）=>{
警报（错误）；
console.log（错误）；
});
}
render（）{
返回(
)
}
}

表组件

export default class RecordsTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {

        const { columns, records, model } = this.props

        return (
            <Table striped>
                <Table.Header>
                    <Table.Row>
                        {
                            columns.map((column) => {
                                return (
                                    <Table.HeaderCell key={column.id}>
                                        {column}
                                    </Table.HeaderCell>
                                )
                            })
                        }
                        <Table.HeaderCell>Actions</Table.HeaderCell>
                        <Table.HeaderCell>Actions</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {
                        records.map((record) => {
                            return (
                                
                                //Warning: Each child in a list should have a unique "key" prop.
                                <Table.Row key={record.id} > 
                                    {
                                        columns.map((column) => {
                                            if (column === 'First Name') {
                                                return (<Table.Cell>{record.firstName}</Table.Cell>)
                                            }
                                            else if (column === 'Last Name') {
                                                return (<Table.Cell>{record.lastName}</Table.Cell>)
                                            }
                                            else if (column === 'Address') {
                                                return (<Table.Cell>{record.address}</Table.Cell>)
                                            }
                                            else {
                                                return (<Table.Cell>{record.column}</Table.Cell>)
                                            }
                                        })
                                    }
                                    { // Edit Customer Component
                                        model === 'Customers' && <Table.Cell>Edit Customer</Table.Cell>}
                                    {
                                        // Edit Product Component
                                        model === 'Products' && <Table.Cell>Edit Product</Table.Cell>
                                    }
                                    <Table.Cell>Delete</Table.Cell>
                                </Table.Row>
                            )
                        })
                    }
                </Table.Body>
            </Table>
        )
    }
}

导出默认类RecordsTable扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
const{columns，records，model}=this.props
返回(
{
columns.map（（column）=>{
返回(
{column}
)
})
}
行动
行动
{
records.map（（记录）=>{
返回(
//警告：列表中的每个孩子都应该有一个唯一的“键”道具。
{
columns.map（（column）=>{
如果（列=='First Name'）{
返回（{record.firstName}）
}
else if（列==='Last Name'）{
返回（{record.lastName}）
}
else if（列=='Address'）{
返回（{record.address}）
}
否则{
返回（{record.column}）
}
})
}
{//编辑客户组件
模型==='客户'&&编辑客户}
{
//编辑产品组件
模型===“产品”&编辑产品
}
删除
)
})
}
)
}
}

来自文档：

应为数组中的元素提供键，以使元素具有稳定的标识

你需要设定一个目标。您在

组件中遗漏了它

<Table.Row key={record.id} > 
    {
        columns.map((column) => {
            const key = column['something'];
            if (column === 'First Name') {
                return (<Table.Cell key={key}>{record.firstName}</Table.Cell>)
            }
            else if (column === 'Last Name') {
                return (<Table.Cell key={key}>{record.lastName}</Table.Cell>)
            }
            else if (column === 'Address') {
                return (<Table.Cell key={key}>{record.address}</Table.Cell>)
            }
            else {
                return (<Table.Cell key={key}>{record.column}</Table.Cell>)
            }
        })
    }
    { // Edit Customer Component
        model === 'Customers' && <Table.Cell>Edit Customer</Table.Cell>}
    {
        // Edit Product Component
        model === 'Products' && <Table.Cell>Edit Product</Table.Cell>
    }
    <Table.Cell>Delete</Table.Cell>
</Table.Row>

{
columns.map（（column）=>{
常量键=列['something']；
如果（列=='First Name'）{
返回（{record.firstName}）
}
else if（列==='Last Name'）{
返回（{record.lastName}）
}
else if（列=='Address'）{
返回（{record.address}）
}
否则{
返回（{record.column}）
}
})
}
{//编辑客户组件
模型==='客户'&&编辑客户}
{
//编辑产品组件
模型===“产品”&编辑产品
}
删除

如果问题仍然存在，您可能需要检查是否还有其他地方您可能错过了道具。

来自文档：

应为数组中的元素提供键，以使元素具有稳定的标识

你需要设定一个目标。您在

组件中遗漏了它

<Table.Row key={record.id} > 
    {
        columns.map((column) => {
            const key = column['something'];
            if (column === 'First Name') {
                return (<Table.Cell key={key}>{record.firstName}</Table.Cell>)
            }
            else if (column === 'Last Name') {
                return (<Table.Cell key={key}>{record.lastName}</Table.Cell>)
            }
            else if (column === 'Address') {
                return (<Table.Cell key={key}>{record.address}</Table.Cell>)
            }
            else {
                return (<Table.Cell key={key}>{record.column}</Table.Cell>)
            }
        })
    }
    { // Edit Customer Component
        model === 'Customers' && <Table.Cell>Edit Customer</Table.Cell>}
    {
        // Edit Product Component
        model === 'Products' && <Table.Cell>Edit Product</Table.Cell>
    }
    <Table.Cell>Delete</Table.Cell>
</Table.Row>

{
columns.map（（column）=>{
常量键=列['something']；
如果（列=='First Name'）{
返回（{record.firstName}）
}
else if（列==='Last Name'）{
返回（{record.lastName}）
}
else if（列=='Address'）{
返回（{record.address}）
}
否则{
返回（{record.column}）
}
})
}
{//编辑客户组件
模型==='客户'&&编辑客户}
{
//编辑产品组件
模型===“产品”&编辑产品
}
删除

---

如果问题仍然存在，您可能需要检查是否还有其他地方您可能错过了道具。

根据

记录

数组的结构，您需要在其中找到一些字段或它们的组合，根据

记录

数组的结构，每个项目都是唯一的，y