admin管理员组文章数量:1328755
The application works pletely, but the console returns this
The plete error is: Encountered two children with the same key, 1
. Keys should be unique so that ponents maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
My backend laravel returning:
return $customers = DB :: table ('customers')
-> rightJoin ('debts', 'customers.id', '=', 'debts.customer')
-> join ('panies', 'panies.id', '=', 'debtspany')
-> join ('addresses', 'addresses.id', '=', 'customers.address')
-> join ('cities', 'cities.id', '=', 'addresses.city')
-> join ('states', 'states.id', '=', 'cities.state')
-> select ('customers. *', 'debts.debt', 'paniespany', 'addresses.streetName', 'addresses.buildingNumber', 'cities.city', 'states.uf')
-> get ();
My frontend 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: []
}
}
ponentDidMount () {
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 ```
The application works pletely, but the console returns this
The plete error is: Encountered two children with the same key, 1
. Keys should be unique so that ponents maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
My backend laravel returning:
return $customers = DB :: table ('customers')
-> rightJoin ('debts', 'customers.id', '=', 'debts.customer')
-> join ('panies', 'panies.id', '=', 'debts.pany')
-> join ('addresses', 'addresses.id', '=', 'customers.address')
-> join ('cities', 'cities.id', '=', 'addresses.city')
-> join ('states', 'states.id', '=', 'cities.state')
-> select ('customers. *', 'debts.debt', 'panies.pany', 'addresses.streetName', 'addresses.buildingNumber', 'cities.city', 'states.uf')
-> get ();
My frontend 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: []
}
}
ponentDidMount () {
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 ```
Share
Improve this question
asked Jan 30, 2020 at 3:48
Isaque PalmieriIsaque Palmieri
972 gold badges2 silver badges10 bronze badges
2 Answers
Reset to default 3React Keys
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
When you don’t have stable IDs for rendered items, you may use the item index
as a key as a last resort.
For more clarification check https://reactjs/docs/lists-and-keys.html
change this code
{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.
In react when you map an array of elements it expects the each element to have a unique key which it uses to identify(and further diff etc) the elements so the error is because you have two elements whose key is turning out to be 1
somehow. so check why two customer elements has same customer.id
. you can read more about why/how react uses keys in-depth here: https://reactjs/docs/reconciliation.html#recursing-on-children
本文标签:
版权声明:本文标题:javascript - Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity a 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742250806a2440722.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论