Javascript 如何仅在id匹配时切换图标？
在从API接收数据并将其映射出来之后，我尝试切换一个图标，但它切换所有映射出来的图标。我正在尝试单击其中一个图标，而不是全部Javascript 如何仅在id匹配时切换图标？,javascript,arrays,json,reactjs,restapi,Javascript,Arrays,Json,Reactjs,Restapi,在从API接收数据并将其映射出来之后，我尝试切换一个图标，但它切换所有映射出来的图标。我正在尝试单击其中一个图标，而不是全部 import { FaRegHeart, FaHeart } from "react-icons/fa"; import { IconContext } from 'react-icons'; import { useState, useEffect } from 'react'; const Replies = ({ comments, id })
import { FaRegHeart, FaHeart } from "react-icons/fa";
import { IconContext } from 'react-icons';
import { useState, useEffect } from 'react';
const Replies = ({ comments, id }) => {
const [liked, setLiked] = useState(false);
const [replies, setReplies] = useState(null);
useEffect(() => {
const abortCont = new AbortController();
fetch('http://192.168.1.98:5000/blogs/' + id, { signal: abortCont.signal })
.then(res => {
if (!res.ok) {
throw new Error('Could not get data from the database');
}
return res.json()
})
.then(data => setReplies(data))
.catch(err => {
if (err.name === 'AbortError') {
// empty if statement
}})
return () => abortCont.abort()
}, [liked])
const likeComment = () => {liked ? setLiked(false) : setLiked(true)}
return (
<>
{replies && <div className="commentSection">
{
replies.discussion.map((discussion) => (
<div key={discussion.id}>
<div className="commentEmoji">
{
liked ? <IconContext.Provider value={{ color: 'red', className: 'love-icon' }}>
<FaHeart onClick={likeComment} />
</IconContext.Provider>
: <FaRegHeart onClick={likeComment} />}
</div>
</div>
))}
</div>
}
</>
);
}
export default Replies;
从“react icons/fa”导入{FaRegHeart，FaHeart}；
从“反应图标”导入{IconContext}；
从“react”导入{useState，useEffect}；
常量回复=（{comments，id}）=>{
const[liked，setLiked]=useState（false）；
const[repries，setrepries]=useState（null）；
useffect（（）=>{
const abortCont=新的AbortController（）；
取（'http://192.168.1.98:5000/blogs/'+id，{信号：abortCont.signal}）
。然后（res=>{
如果（！res.ok）{
抛出新错误（'无法从数据库获取数据'）；
}
return res.json（）
})
.然后（数据=>setReplies（数据））
.catch（错误=>{
如果（err.name=='abortorror'）{
//空if语句
}})
return（）=>abortCont.abort（）
}，[喜欢]）
const likeComment=（）=>{liked？setLiked（false）：setLiked（true）}
返回(
{答复&&
{
回复.discussion.map（（讨论）=>(
{
喜欢？
: }
))}
}
);
}
导出默认回复；
"discussion": [
{
"id": 1,
"liked": false,
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/75.jpg",
"user": "Kayode",
"comment": "They know electric vehicles are the future Try something like this, and pass appropriate props in LikedButton
component
import { FaRegHeart, FaHeart } from "react-icons/fa";
import { IconContext } from 'react-icons';
import { useState, useEffect } from 'react';
const LikedButton = () => {
const [liked, setLiked] = useState(false);
const likeComment = () => {liked ? setLiked(false) : setLiked(true)}
return (
<div >
<div className="commentEmoji">
{
liked ? <IconContext.Provider value={{ color: 'red', className: 'love-icon' }}>
<FaHeart onClick={likeComment} />
</IconContext.Provider>
: <FaRegHeart onClick={likeComment} />}
</div>
</div>
)
}
const Replies = ({ comments, id }) => {
const [replies, setReplies] = useState(null);
useEffect(() => {
const abortCont = new AbortController();
fetch('http://192.168.1.98:5000/blogs/' + id, { signal: abortCont.signal })
.then(res => {
if (!res.ok) {
throw new Error('Could not get data from the database');
}
return res.json()
})
.then(data => setReplies(data))
.catch(err => {
if (err.name === 'AbortError') {
// empty if statement
}})
return () => abortCont.abort()
}, [])
return (
<>
{replies && <div className="commentSection">
{
replies.discussion.map((discussion, index) => (
<LikedButton key={index} />
))}
</div>
}
</>
);
}
export default Replies;
“讨论”：[
{
“id”：1，
“喜欢”：假，
“缩略图”：https://randomuser.me/api/portraits/thumb/men/75.jpg",
“用户”：“Kayode”，
“评论”：“他们知道电动汽车是未来的尝试类似的方法，并在LikedButton
组件中传递适当的道具
import LikedComment from './LikedComment';
import { useState, useEffect } from 'react';
const Replies = ({ comments, id }) => {
const [error, setError] = useState(false);
const [replies, setReplies] = useState(null);
useEffect(() => {
const abortCont = new AbortController();
fetch('http://192.168.1.98:5000/blogs/' + id, { signal: abortCont.signal })
.then((res) => {
if (!res.ok) {
throw new Error('Could not get data from the database');
}
return res.json();
})
.then((data) => {
setReplies(data);
})
.catch((err) => {
if (err.name === 'AbortError') {
// empty if statement
} else {
setError(true);
}
});
return () => abortCont.abort();
}, [id]);
const likeComment = (id) => {
setReplies({
...replies,
discussion: replies.discussion.map((reply) => {
if (reply.id === id) {
return { ...reply, liked: !reply.liked };
} else {
return reply;
}
}),
});
};
return (
<>
{error && <div className="commentError">Cannot retrieve comments </div>}
{replies && (
<div className="commentSection">
{replies.discussion.map((discussion, index) => (
<div key={discussion.id}>
<div className="comment">
<img className="commentImg" src={discussion.thumbnail} alt="" />
<div className="commentBody">
<p>
{' '}
<span>{discussion.user}</span> {discussion.comment}
</p>
</div>
<div className="commentEmoji">
<LikedComment
liked={discussion.liked}
key={index}
likeComment={() => likeComment(discussion.id)}
/>
</div>
</div>
</div>
))}
</div>
)}
</>
);
};
export default Replies;
从“react icons/fa”导入{FaRegHeart，FaHeart}；
从“反应图标”导入{IconContext}；
从“react”导入{useState，useEffect}；
const LikedButton=（）=>{
const[liked，setLiked]=useState（false）；
const likeComment=（）=>{liked？setLiked（false）：setLiked（true）}
返回(
{
喜欢？
: }
)
}
常量回复=（{comments，id}）=>{
const[repries，setrepries]=useState（null）；
useffect（（）=>{
const abortCont=新的AbortController（）；
取（'http://192.168.1.98:5000/blogs/'+id，{信号：abortCont.signal}）
。然后（res=>{
如果（！res.ok）{
抛出新错误（'无法从数据库获取数据'）；
}
return res.json（）
})
.然后（数据=>setReplies（数据））
.catch（错误=>{
如果（err.name=='abortorror'）{
//空if语句
}})
return（）=>abortCont.abort（）
}, [])
返回(
{答复&&
{
回复.discussion.map（（讨论，索引）=>(
))}
}
);
}
导出默认回复；
从“/likedcoment”导入likedcoment；
从“react”导入{useState，useEffect}；
常量回复=（{comments，id}）=>{
const[error，setError]=useState（false）；
const[repries，setrepries]=useState（null）；
useffect（（）=>{
const abortCont=新的AbortController（）；
取（'http://192.168.1.98:5000/blogs/'+id，{信号：abortCont.signal}）
。然后（（res）=>{
如果（！res.ok）{
抛出新错误（'无法从数据库获取数据'）；
}
返回res.json（）；
})
。然后（（数据）=>{
（数据）；
})
.catch（（错误）=>{
如果（err.name=='abortorror'）{
//空if语句
}否则{
设置错误（真）；
}
});
return（）=>abortCont.abort（）；
}，[id]）；
const likeComment=（id）=>{
setReplies({
……答复，
讨论：回复.discussion.map（（回复）=>{
如果（reply.id==id）{
返回{…reply，liked:！reply.liked}；
}否则{
回复；
}
}),
});
};
返回(
{错误&&无法检索注释}
{答复&&(
{repress.discussion.map（（讨论，索引）=>(
{' '}
{discussion.user}{discussion.comment}
likeComment（discussion.id）}
/>
))}
)}
);
};
导出默认回复；
您是否有讨论。喜欢的属性？您的上下文提供程序应包装两个图标。@AjithGopi是的，我有讨论。喜欢的property@Tobiasz如果我包装了一个组件，因为如果喜欢，我需要更改颜色。尝试拆分组件。制作一个位于贴图循环内的新组件。只要喜欢的状态存在，它将更改所有图标的状态。感谢您的帮助