![](/img/trans.png)
[英]Warning: Each child in a list should have a unique “key” prop even tho it has unique key React
[英]React Warning: Each child in a list should have a unique "key" prop
我刚刚开始了一个基本的 React 项目,在我的 home.js 中我可以看到这个警告。 请注意,我已将密钥添加为 home.js 中的唯一密钥,但仍然存在错误。 我检查了社区的其他帖子,但我无法发现错误,因此寻求帮助!
如果你能帮上忙,我会欠你很多的!
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `home`. See https://reactjs.org/link/warning-keys for more information.
at small
at Homepage (http://localhost:3000/static/js/bundle.js:613:63)
at Routes (http://localhost:3000/static/js/bundle.js:39951:5)
at div
at ApolloProvider (http://localhost:3000/static/js/bundle.js:55884:19)
at Router (http://localhost:3000/static/js/bundle.js:39884:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:39364:5)
at App
请在下面找到我的 home.js
import React from 'react'
import { Link } from 'react-router-dom'
import { useQuery, gql } from '@apollo/client'
const REVIEWS = gql`
query GetReviews {
reviews {
data{
id
attributes{
title
rating
body
categories{
data{
attributes
{
name
}
}
}
}
}
}
}
`
export default function Homepage() {
const { loading, error, data } = useQuery(REVIEWS)
if (loading) return <p>Loading...</p>
if (error) return <p>Error :(</p>
console.log(data)
return (
<div>
{data.reviews.data.map(review => (
<div key={review.id} className="review-card">
<div className="rating">{review.attributes.rating}</div>
<h2>{review.attributes.title}</h2>
{review.attributes.categories.data.map(c => (
<small key={c.id}>{c.attributes.name}</small>
))}
<p>{review.attributes.body.substring(0, 200)}... </p>
<Link to={`/details/${review.id}`}>Read more</Link>
</div>
))}
</div>
)
}
这是我的 App.js
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"
// page & layout imports
import Homepage from './pages/Homepage'
import ReviewDetails from './pages/ReviewDetails'
import Category from './pages/Category'
import SiteHeader from "./components/SiteHeader"
// apollo client
const client = new ApolloClient({
uri: 'http://localhost:1337/graphql',
cache: new InMemoryCache()
})
function App() {
return (
<Router>
<ApolloProvider client={client}>
<div className="App">
<SiteHeader />
<Routes>
<Route exact path="/" element={ <Homepage />}>
</Route>
<Route exact path="/details/:id" element={<ReviewDetails />}>
</Route>
<Route exact path="/category/:id" element={<Category />}>
</Route>
</Routes>
</div>
</ApolloProvider>
</Router>
);
}
export default App
我也是新来的反应。 {review.id} 是否存在并且是独一无二的? 请查看它是否是 review._id 或类似的东西。
如果 review.id 不存在或者它不是唯一的......那么这是解决此问题的另一种方法。
{data.reviews.data.map((review, i) => (
<div key={i} className="review-card"> // ->made only this change
<div className="rating">{review.attributes.rating}</div>
<h2>{review.attributes.title}</h2>
{review.attributes.categories.data.map(c => (
<small key={c.id}>{c.attributes.name}</small>
))}
<p>{review.attributes.body.substring(0, 200)}...
</p>
<Link to={`/details/${review.id}`}>Read
more</Link>
</div>
))}
</div>
)
}
谢谢! 你给我指明了正确的方向! 我在 gql 语句中缺少id
query GetReviews {
reviews {
data{
id
attributes{
title
rating
body
categories{
data{
id
attributes
{
name
}
}
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.