我正在尝试在 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>
答案 0 :(得分:0)
这与这个问题无关。但是,如果您准备进行重构,那么我建议您将 likePost 和 dislikePost 函数更改为一个函数。因为这两个函数的作用相同,只是它们具有不同的 url,您可以将其作为函数参数传递。
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