[英]In React.js the onClick function is not showing details without page refresh
我正在尝试在 React.js 中创建一个线条和不喜欢按钮。 我有两个包含谷歌图标的标签,点击图标后,它们应该实时更改,而无需刷新页面。
但如果不刷新页面,它们就不会改变。 我使用的是MacBook Air ,我同时使用Safari 浏览器和Brave 浏览器,但它无法正常工作。
import React, { useState, useEffect, useContext } from 'react';
import {UserContext} from '../../App';
const Home = () => {
const [data, setData] = useState([]);
const { state, dispatch } = useContext(UserContext); // eslint-disable-line
useEffect(() => {
fetch('/allpost', {
headers: {
"Authorization": "Bearer " + localStorage.getItem("jwt")
}
}).then(res => res.json()).then(result => {
setData(result.posts);
});
}, []);
const likePost = (id) => {
fetch('/like', {
method: "put",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("jwt")
},
body: JSON.stringify({
postId: id
})
}).then(res => res.json()).then(result => {
const newData = data.map(item => {
if (item._id == result._id) { // eslint-disable-line
return result;
} else {
return item;
}
})
setData(newData);
}).catch(err => {
console.log(err);
});
}
const dislikePost = (id) => {
fetch('/dislike', {
method: "put",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + localStorage.getItem("jwt")
},
body: JSON.stringify({
postId: id
})
}).then(res => res.json()).then(result => {
const newData = data.map(item => {
if (item._id == result._id) { // eslint-disable-line
return result;
} else {
return item;
}
})
setData(newData);
}).catch(err => {
console.log(err);
});
}
return (
<div className="home">
{
data.map(item => {
return (
<div className="card home-card" style={{ borderRadius:"6px" }} key={item._id}>
<h6 style={{ paddingLeft: "10px", paddingTop:"10px", fontSize:"17px" }}>{ item.postedBy.name }</h6>
<div className="card-image">
<img src={ item.photo } style={{ paddingLeft:"6px", paddingRight:"6px" }} alt="Posted photograph" />
</div>
<div className="card-content">
{item.likes.includes(state._id)
?
<i className="material-icons" style={{ color: "red" }} onClick={() => { dislikePost(item._id) }}>favorite_border</i>
:
<i className="material-icons" style={{ color: "red" }} onClick={() => {likePost(item._id)}}>favorite</i>
}
<h6>{item.likes.length} likes</h6>
<h6>{ item.title }</h6>
<p>{ item.body }</p>
<input type="text" placeholder="Add a comment here." />
</div>
</div>
);
})
}
</div>
);
}
export default Home;
我特别提到了我的图标更改逻辑的编写位置。 如下:
<div className="card-content">
{item.likes.includes(state._id)
?
<i className="material-icons" style={{ color: "red" }} onClick={() => { dislikePost(item._id) }}>favorite_border</i>
:
<i className="material-icons" style={{ color: "red" }} onClick={() => {likePost(item._id)}}>favorite</i>
}
<h6>{item.likes.length} likes</h6>
<h6>{ item.title }</h6>
<p>{ item.body }</p>
<input type="text" placeholder="Add a comment here." />
</div>
这与这个问题无关。 但是,如果您准备进行重构,那么我建议您将 likePost 和 dislikePost 函数更改为一个 function。 因为这两个函数的作用相同,只是它们具有不同的 url ,您可以将其作为 function 参数传递。
const updatePostLikes = (id, url) => {
fetch(url, {
method: 'put',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + localStorage.getItem('jwt'),
},
body: JSON.stringify({
postId: id,
}),
})
.then((res) => res.json())
.then((result) => {
const newData = data.map((item) => {
if (item._id == result._id) {
// eslint-disable-line
return result;
} else {
return item;
}
});
setData(newData);
})
.catch((err) => {
console.log(err);
});
}
当点击喜欢和不喜欢按钮时,您现在可以执行此操作
updatePostLikes(item._id, '/like') // for likes
updatePostLikes(item._id, '/dislike') // for dislikes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.