[英]Warning: Each child in a list should have a unique "key" prop. Even after setting the key already
I'm using react in front-end and node, express and mongoose in backend.我在前端和节点中使用 react,在后端使用 express 和 mongoose。
I have already made a key={uniqueid} in the files but still I'm getting the error.我已经在文件中创建了一个 key={uniqueid} 但仍然出现错误。
Here is the full error(s):这是完整的错误:
index.js:1 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `ArticleCard`. See for more information.
in div (at ArticleCard.js:34)
in ArticleCard (at Blog.js:24)
in div (at Blog.js:22)
in div (at Blog.js:21)
in Blog (created by Context.Consumer)
in Route (at App.js:44)
in Switch (at App.js:38)
in AuthContextProvider (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in div (at App.js:32)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)
index.js:1 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `CreateArticle`. See for more information.
in option (at CreateArticle.js:92)
in CreateArticle (created by Context.Consumer)
in Route (at App.js:42)
in Switch (at App.js:38)
in AuthContextProvider (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in div (at App.js:32)
in App (at src/index.js:9)
in StrictMode (at src/index.js:8)
Here is the ArticleCard.js:这是 ArticleCard.js:
import React, { Component, 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: [{}]
})
useEffect(() => {
axios.get('http://localhost:2000/apiEndpoint/READ')
.then(res => {
setPosts({ ...posts,
postAll: res.data
})
})
}, [])
const articles = 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>
)
})
return (
<div className='cardContainer'>
{
articles > 0 ? "NO" : articles
}
</div>
)
}
export default ArticleCard
Here is the CreateArticle.js:这是 CreateArticle.js:
import { useState } from "react";
import React from 'react';
import axios from 'axios'
import '../CSS/CreateArticle.css'
const CreateArticle=()=>{
const newData={
title: '',
body:'',
category:'',
success:'',
fail:''
}
const [data, setData] = useState(newData);
const [response, setResponse] = useState(newData);
const [category,setCategory] = useState(['Fashion', 'Food', 'Travel', 'Music', 'Lifestyle', 'Fitness', 'DIY', 'Sports', 'Finance', 'Politics', 'Parenting'])
const handleSubmit=async (e)=>{
e.preventDefault()
await axios.post('http://localhost:2000/apiEndpoint/CREATE', {
title: data.title,
body: data.body,
category:data.category
},{withCredentials:true},{
headers: {
'Content-Type': 'application/json'
}})
.then(function (res) {
if(res.data==='Post Added'){
console.log('Success:',res)
setResponse({...response, title:'', body:'',category:'',success: "Post Sucessfully Added"})
}else if(res.data==='JWT authentication failed'){
setResponse({...response, title:'', body:'',category:'',fail: "You need to login before creating a new post"})
}else{
console.log('Erorr', res)
setResponse({...response, title:res.data.error.title, body:res.data.error.body,category:res.data.error.category,success:''})
}
})
}
const handleChange=(e)=>{
const {name,value}=e.target
setData({ ...data, [name]: value });
}
return(
<div className='ninetyPer'>
<div className='flexit'>
<h1>Create Post</h1>
{response.success?(<h5 className='success'>{response.success}</h5>):''}
{response.fail?(<h5 className='err'>{response.fail}</h5>):''}
<form onSubmit={handleSubmit}>
<div className='Container'>
<div className='inputField'>
<input name='title' onChange={handleChange} value={data.title} placeholder='Title'></input>
{response.title?(<h5 className="err">{response.title}</h5>):''}
</div>
<div className='bodyField'>
<textarea
name='body'
onChange={handleChange}
value={data.body}
placeholder='Write anything'
/>
{response.body?(<h5 className="err">{response.body}</h5>):''}
</div>
<div className='selectField'>
<select name='category' value={data.category} onChange={handleChange}>
<option value=''>~None Selected~</option>
{category.map(cat=>{
return(
<option value={cat}>{cat}</option>
)
})
}
</select>
{response.category?(<h5 className="err">{response.category}</h5>):''}
</div>
</div>
<button className='submitBtn'>Submit</button>
</form>
</div>
</div>
)
}
export default CreateArticle
If you require any other file to find the issue, I will update my post with it.如果您需要任何其他文件来查找问题,我会用它更新我的帖子。
Update : I checked with console.log(uniqueID) .更新:我检查了console.log(uniqueID) 。 At first, it gives me UNDEFINED but the other time it gives the ID.
起初,它给了我UNDEFINED但其他时候它给了 ID。 I don't know why exactly does it have UNDEFINED at first even though I checked the data in the DB and they all have separate unique IDs.
即使我检查了数据库中的数据并且它们都有单独的唯一 ID,我也不知道为什么一开始它是UNDEFINED 。
I think that problem is const uniqueID = post._id.我认为这个问题是 const uniqueID = post._id。 You must print (console.log(post._id)) to see this value is not null or not repeat.
您必须打印 (console.log(post._id)) 才能看到此值不为空或不重复。 Also in:
也在:
<select name='category' value={data.category} onChange={handleChange}>
<option value=''>~None Selected~</option>
{category.map(cat=>{
return(
<option value={cat}>{cat}</option>
)
})
}
you need to specify a key value您需要指定一个键值
<option key={[uniquevalue]} value={cat}>{cat}</option>
In ArticleCard.js
use console.log(uniqueID)
to check if id has any value or it shows undefined.在
ArticleCard.js
使用console.log(uniqueID)
检查 id 是否有任何值或显示未定义。
If value shows undefined then try to check the code from where you are passing that ID.如果值显示未定义,则尝试检查传递该 ID 的代码。
If uniqueID
shows some value then there maybe two possibility check the ID doesn't match with other one, or if you're using any delete post option如果
uniqueID
显示某个值,则可能有两种可能性检查 ID 与其他 ID 不匹配,或者您是否使用了任何删除帖子选项
If its collapse while adding post after deleting any post then check if you're incrementing ID if yes there may be possibility that ID match will already exist one如果它在删除任何帖子后添加帖子时崩溃,请检查您是否正在增加 ID 如果是,则 ID 匹配可能已经存在
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>
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.