反应警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我刚刚启动了一个基本的 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

Answer 1

谢谢！你给我指明了正确的方向！我在 gql 语句中缺少id

 query GetReviews {
    reviews {
        data{
            id
            attributes{
              title
              rating
              body
              categories{
                data{
                  id
                  attributes
                  {
                    name
                  }
                }
              }
            }
        }
    }
  }

Answer 2

我也是新手。 review.id 是否存在并且是独一无二的？请看是不是rev​​iew._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>
    )
}