Javascript 警告：列表中的每个子项都应具有唯一的；“关键”；道具即使已经设置了关键点

我在前端使用react，在后端使用node、express和mongoose

我已经在文件中创建了一个key={uniqueid}，但是仍然得到了错误

以下是完整错误：

index.js:1警告：列表中的每个子级都应该有一个唯一的“key”属性。
检查“ArticleCard”的呈现方法。有关更多信息，请参阅。
在部门（在ArticleCard.js:34）
在文章卡中（Blog.js:24）
在div中（Blog.js:22）
在div中（Blog.js:21）
在博客中（由Context.Consumer创建）
途中（见App.js:44）
in Switch（位于App.js:38）
在AuthContextProvider中（位于App.js:35）
路由器中（由BrowserRouter创建）
浏览器路由器中（位于App.js:34）
在div中（位于App.js:32）
应用程序内（位于src/index.js:9）
在StrictMode中（在src/index.js:8处）
js:1警告：列表中的每个子级都应该有一个唯一的“key”属性。
检查“CreateArticle”的呈现方法。有关更多信息，请参阅。
在选项中（位于CreateArticle.js:92）
在CreateArticle中（由Context.Consumer创建）
途中（在App.js:42）
in Switch（位于App.js:38）
在AuthContextProvider中（位于App.js:35）
路由器中（由BrowserRouter创建）
浏览器路由器中（位于App.js:34）
在div中（位于App.js:32）
应用程序内（位于src/index.js:9）
在StrictMode中（在src/index.js:8处）

这是ArticleCard.js:

import React，{Component，useState，useffect}来自'React'；
从“js cookie”导入cookie；
导入“../components/CSS/ArticleCard.CSS”
从“react router dom”导入{Link，Redirect}；
const axios=require（'axios'）。默认值；
const ArticleCard=（）=>{
const[posts，setPosts]=useState({
邮资：[{}]
})
useffect（（）=>{
axios.get（）http://localhost:2000/apiEndpoint/READ')
。然后（res=>{
setPosts（{…posts，
postAll:res.data
})
})
}, [])
const articles=posts.postAll.map（post=>{
const uniqueID=post.\u id
返回(
{post.title}

{post.body}
打开
)
})
报税表（
{
文章>0？“否”：文章
}
)
}
导出默认信用卡

这是CreateArticle.js:

从“react”导入{useState}；
从“React”导入React；
从“axios”导入axios
导入“../CSS/CreateArticle.CSS”
const CreateArticle=（）=>{
常数新数据={
标题：“”，
正文：“”，
类别：“”，
成功：''，
失败：“”
}
const[data，setData]=使用状态（newData）；
const[response，setResponse]=使用状态（newData）；
const[category，setCategory]=useState（[Fashion]、[Food]、[Travel]、[Music]、[Lifestyle]、[Fitness]、[DIY]、[Sports]、[Finance]、[Politics]、[Parking]、[Fashion]、[Fashion]、[
const handleSubmit=async（e）=>{
e、 预防默认值（）
等待axios.posthttp://localhost:2000/apiEndpoint/CREATE', {
标题：data.title，
body:data.body，
类别：data.category
}，{withCredentials:true}{
标题：{
“内容类型”：“应用程序/json”
}})
.然后（功能（res）{
如果（res.data==='Post Added'）{
console.log（'Success:'，res）
setResponse（{…响应，标题：''，正文：''，类别：''，成功：“成功添加邮件”}）
}否则如果（res.data==='JWT身份验证失败'）{
setResponse（{…响应，标题：“”，正文：“”，类别：“”，失败：“创建新帖子之前需要登录”}）
}否则{
console.log（'Erorr'，res）
setResponse（{…响应，标题：res.data.error.title，正文：res.data.error.body，类别：res.data.error.category，成功：“”）
}
})
}
常数handleChange=（e）=>{
常量{name，value}=e.target
setData（{…数据，[名称]：值}）；
}
返回(
创建帖子
{response.success？（{response.success}）：''}
{response.fail？（{response.fail}）：''}
{response.title？（{response.title}）：''}
{response.body？（{response.body}）：''}
~z~未选择任何对象~
{category.map（cat=>{
返回(
{cat}
)
})
}
{response.category？（{response.category}）：''}
提交
)
}
导出默认CreateArticle

如果您需要任何其他文件来查找问题，我将用它更新我的帖子

更新：

---

我使用控制台.log（uniqueID）进行了检查。一开始，它给了我未定义的，但另一次它给了ID。我不知道为什么一开始它有未定义的，尽管我检查了数据库中的数据，它们都有单独的唯一ID。

我认为问题是const uniqueID=post。\u ID.你必须打印（console.log（post.\u ID））要查看此值是否为空或是否重复。还包括：

<select name='category' value={data.category} onChange={handleChange}>
  <option value=''>~None Selected~</option>
     {category.map(cat=>{
        return(
           <option value={cat}>{cat}</option>
        )
      })
  }

~z~未选择任何对象~
{category.map（cat=>{
返回(
{cat}
)
})
}

您需要指定一个键值

 <option key={[uniquevalue]} value={cat}>{cat}</option>

{cat}

在

ArticleCard.js

中，使用

console.log（uniqueID）

检查id是否有任何值或显示未定义

如果值显示未定义的th

import React, { useState, useEffect, useMemo } from 'react';
import Cookies from 'js-cookie';
import '../components/CSS/ArticleCard.css'
import { Link, Redirect } from 'react-router-dom';

const axios = require('axios').default;

const ArticleCard = () => {
  const [posts, setPosts] = useState({
    postAll: [] // remove the empty object from the state initialization
  });

  useEffect(() => {
    axios.get('http://localhost:2000/apiEndpoint/READ')
      .then(res => {
        setPosts({
          ...posts,
          postAll: res.data
        })
      })
  }, [])
    
  /*
   * check whether there are posts; if not, 'articles' will be null
   * NOTE: useMemo aim is to avoid recalculating 'articles' at each re-render
   *       unless 'posts.postAll' has changed.
   */
  const articles = useMemo(() => {
    if (posts.postAll.length === 0) return null;
    
    return posts.postAll.map(post => {
      const uniqueID = post._id;
      return (
        <div key={uniqueID} className='card'>
          <h3>{post.title}</h3>
          <hr />
          <h4>{post.body}</h4>
          <Link className='button' to={`/blog/page/${uniqueID}`}>Open</Link>
        </div>
      );
    });
  }, [posts.postAll]);

  return (
    <div className='cardContainer'>
        {articles ? articles : "NO"}
    </div>
  );
}

export default ArticleCard;

import React, { useState, useEffect } from 'react';
import Cookies from 'js-cookie';
import '../components/CSS/ArticleCard.css'
import { Link, Redirect } from 'react-router-dom';

const axios = require('axios').default;

const ArticleCard = () => {
  const [posts, setPosts] = useState({
    postAll: [] // remove the empty object from the state initialization
  });

  useEffect(() => {
    axios.get('http://localhost:2000/apiEndpoint/READ')
      .then(res => {
        setPosts({
          ...posts,
          postAll: res.data
        })
      })
  }, [])

  return (
    <div className='cardContainer'>
        {posts.postAll.length === 0 ? "NO" : (
        posts.postAll.map(post => {
          const uniqueID = post._id;
          return (
            <div key={uniqueID} className='card'>
              <h3>{post.title}</h3>
              <hr />
              <h4>{post.body}</h4>
              <Link className='button' to={`/blog/page/${uniqueID}`}>Open</Link>
            </div>
          );
        });
      )
    </div>
  );
}

export default ArticleCard;

...
<select name='category' value={data.category} onChange={handleChange}>
  <option value=''>~None Selected~</option>
    {category.map(cat=>{
      return (
        <option key='add_the_key_here' value={cat}>{cat}</option>
      );
    })}
</select>
...