遇到两个 children 使用相同的键“1”。密钥应该是唯一的，以便组件在更新期间保持其身份。 Laravel 反应 JS

Question

应用程序完全运行，但控制台 returns 这个完整的错误是：Encountered two children with the same key, 1。密钥应该是唯一的，以便组件在更新期间保持其身份。 Non-unique 键可能会导致 children 被重复 and/or 省略 — 该行为不受支持，可能会在未来的版本中更改。

我的后端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

当你映射一个元素数组时，它期望每个元素都有一个唯一的键，它用来识别（以及进一步的差异等）元素所以错误是因为你有两个元素，它们的键正在转动不知何故 1。所以检查为什么两个客户元素具有相同的 customer.id。您可以在此处阅读更多关于 why/how React 使用键的深入信息：https://reactjs.org/docs/reconciliation.html#recursing-on-children

Answer 2

反应键

键帮助 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>
                  ))}

May be your customer id is duplicating that's why you are getting warning.

遇到两个 children 使用相同的键“1”。密钥应该是唯一的，以便组件在更新期间保持其身份。 Laravel 反应 JS

Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Laravel React JS

javascript

php

laravel

reactjs

laravel-6