如何使react在单击"类似/不同"按钮后立即重新渲染

Question

我在react应用程序中添加了类似和不同按钮。我使用redux来管理状态，并将数据存储在firebase实时数据库中。按钮正在正常工作，但我需要重新加载页面以显示帖子已被点赞/取消点赞，它不会自行重新渲染。我尝试同时使用forceUpdate和setState，但都不起作用。

postLiked = (id) => {
this.props.onLikePost(this.props.user, id)
this.forceUpdate()
}
postUnliked = (id, unlikeID) => {
this.props.onUnlikePost(id, unlikeID)
}
render() {
{this.props.data.map((res) => {     

const liked = [];
for(let key in res.LikedBy){
liked.push({
...res.LikedBy[key],
id: key
});
}
let boolButton = false;
if(liked.filter((val) => {
if(val.username === this.props.user) {
boolButton = true
}
}))
return(
<div>

<div className="bottomButtons">

{boolButton ? <Button className="btn btn-primary likeDislike"
id="likeButton"
onClick={() => this.postUnliked(res.id, liked.find((val) => {
if(val.username === this.props.user){
return val.id;
}
}))}
>
<FontAwesomeIcon icon={faThumbsUp} style={{width:"13.5px", color:"white"}}/>
</Button> : <Button className="btn btn-light likeDislike"
id="likeButton"
onClick={() => this.postLiked(res.id)}
>
<FontAwesomeIcon icon={faThumbsUp} style={{width:"13.5px"}}/>
</Button>
}

这些是动作功能

export const likePost = (username, postId) => {
const req = {
username,
postId
}
return (dispatch) => {
axios.post('/Data/' + postId + '/LikedBy.json', req)
.then((res) => {
dispatch({
type: actionTypes.Like_Post,
payload: res
})
})
}
}
export const unlikePost = (id, unlikeId) => {
return (dispatch) => {
axios.delete('/Data/' + id + '/LikedBy/' + unlikeId.id + '.json')
.then((res) => {
dispatch({
type: actionTypes.Unlike_Post
})
}).catch((error) => {
console.log(error)
})
}
}

这就是的减速器功能

const initialState = {
Data: []
}
const reducer = (state = initialState, action) => { 
switch(action.type){

case actionTypes.Like_Post: 
return {
...state,
Data: state.Data.map((post) => post.id === action.payload.postId
? {...post, LikedBy: post.LikedBy.concat(action.payload.username)}:post),
loading: false,
}
case actionTypes.Unlike_Post: 
return {
...state,
Data: state.Data,
loading: false,
}

EDIT我尝试了其他方法，但都不起作用。问题出在减速器上，我没有正确更新状态。我尝试更新LikedBy字段，但只得到一个错误
尝试过这种方法，但我收到一个错误，说res.map不是函数

case actionTypes.Like_Post:
return {
...state,
Data: state.Data.forEach((res) => res.map((q) => {
if(q.id === action.payload.postId) {
q.LikedBy.concat(action.payload.username)
}
return q
})
)
}

Answer 1

你真的不应该重新加载页面来上传这个状态(不要听别人告诉你这么做(；这是React设计用来解决的众多问题之一。您遇到问题的原因是因为您的组件没有看到其数据发生更改，因此没有触发重新渲染，这很可能是因为您没有将正确的道具传递到组件中。

您的redux reducer引用的是Data，但在组件中，您正在本地使用this.props.data，请确保您确实将数据reducer正确地传递到组件中。