React.js - 列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React.js - Each child in a list should have a unique "key" propReact.js - 列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-02-19 17:46:58
【问题描述】：

我的应用程序中出现“列表中的每个孩子都应该有一个唯一的“关键”道具”错误。我可以打印表格，但我不确定为什么它会给我这个错误，因为我为列表中的每个项目提供了唯一的 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>
        )
    }
}

表格组件

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>
        )
    }
}

【问题讨论】：

根据你的records数组的结构，你需要在其中找到一些字段或它们的组合，每个项目都是唯一的

标签： javascript reactjs react-props

【解决方案1】：

来自文档：

应为数组内的元素赋予键以赋予元素稳定的身份

您需要设置key prop to every instance where an array .map is involved。您在 <Tabel.Cell> 组件中错过了它。

<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>

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

【讨论】：