遇到两个孩子使用相同的钥匙，`1`。密钥应该是唯一的，以便组件在更新时保持其身份。 Laravel 反应 JS

Question

应用程序完全运行，但控制台返回这个 完整的错误是：遇到两个具有相同密钥的孩子，1。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项重复和/或省略 - 该行为不受支持，并且可能会在未来版本中更改。

我的后端 laravel返回：

return $customers = DB :: table ('customers')
    -> rightJoin ('debts', 'customers.id', '=', 'debts.customer')
    -> join ('companies', 'companies.id', '=', 'debts.company')
    -> join ('addresses', 'addresses.id', '=', 'customers.address')
    -> join ('cities', 'cities.id', '=', 'addresses.city')
    -> join ('states', 'states.id', '=', 'cities.state')
    -> select ('customers. *', 'debts.debt', 'companies.company', 'addresses.streetName', 'addresses.buildingNumber', 'cities.city', 'states.uf')
    -> get ();

我的前端 ReactJs：

import axios from 'axios'
import React, { Component } from 'react'
import { Redirect } from 'react-router';
import { Link } from 'react-router-dom'

class CustomersList extends Component {

  constructor (props) {
    super(props)

    this.state = {
      customers: []
    }
  }

  componentDidMount () {
    axios.get('/api/customers').then(response => {
      this.setState({
        customers: response.data
      })
    })
  }

  render () {
    const { customers } = this.state
    customers.sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0))

    console.log(customers)

    return (
       <div className='container py-4'>
        <div className='row justify-content-center'>
          <div className='col-md-8'>
            <div className='card'>
              <div className='card-header'>
                <h4 className='list-inline-item'>All customers</h4>
              </div>

              <div className='card-body'>
                <ul className='list-group list-group-flush'>
                  {customers.map(customer => (
                    <Link
                      className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
                      to={`/customer/${customer.id}`}
                      key={customer.id}
                    >
                      {customer.name}
                    </Link>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default CustomersList ```

Answer 1

反应键

键帮助 React 识别哪些项目已更改、添加或删除。应为数组内的元素赋予键，以使元素具有稳定的标识：

当您没有渲染项目的稳定 ID 时，您可以使用项目 index 作为密钥作为最后的手段。 如需更多说明，请查看https://reactjs.org/docs/lists-and-keys.html

更改此代码

                {customers.map((customer,index) => (
                    <Link
                      className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
                      to={`/customer/${customer.id}`}
                      key={index}
                    >
                      {customer.name}
                    </Link>
                  ))}

可能是您的客户 ID 重复，这就是您收到警告的原因。

Answer 2

当你映射一个元素数组时，它期望每个元素都有一个唯一的键，它用来识别（以及进一步区分等）元素，所以错误是因为你有两个元素的键变成以某种方式成为1。所以检查为什么两个客户元素有相同的customer.id。您可以在此处详细了解 react 为何/如何使用键：https://reactjs.org/docs/reconciliation.html#recursing-on-children