Javascript 发送分派时，UseEffect不更新react网站数据

我正在创建一个图书推荐网站来实践MERN stack，但是我刚刚实现了喜欢一个博客，但是要在你喜欢它之后查看喜欢的数量，你需要刷新该网站。我如何解决这个问题

这是博客组件，在底部我有两个按钮来发送喜欢的文章和删除它。一旦按下delete键，它就会将其从页面中删除，但类似的操作不起作用

import React from 'react';
import { useDispatch } from 'react-redux';
import { Card, CardContent, CardActionArea, CardMedia, Paper, Typography, Grid, Button} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import DeleteIcon from '@material-ui/icons/Delete';
import FavoriteIcon from '@material-ui/icons/Favorite';
import { deleteBlog, likeBlog } from '../../../actions/blogs';

//Styles
const useStyles = makeStyles((theme)=>({
  root: {
    '& .MuiTextField-root': {
      margin: theme.spacing(1),
    },
  },
    media: {
      height: 190,
      width:160,
    },
    card: {
      margin: '5px',
      width: '70%'
    },
    cardContent: {
      margin: '0x',
    },
    actionArea:{
      width: 100,
    }
  }));

const Blog = ({blog, currentId}) => {
    const classes = useStyles();
    const dispatch = useDispatch(); 
    return ( 
            <Card className={classes.card}>
            <CardContent>
                      <Typography variant="h5">{blog.title}</Typography>
                    </CardContent>
             <Grid container>
              <Grid item className={classes.cardContent}>
                <CardMedia image={blog.selectedFile} title={blog.title} className={classes.media}/>
              </Grid>
              <Grid item className={classes.cardContent}>
                <CardContent>
                  <Typography variant="p">{blog.content}</Typography>
                  <br/>
                  <Typography variant="p">RATING: {blog.rating}/10</Typography>
                </CardContent>
              </Grid>
             </Grid>
             <CardContent align="right">
              <Button onClick={() => dispatch(deleteBlog(blog._id))}><DeleteIcon color="secondary"/></Button>
              <Button onClick={()=> dispatch(likeBlog(blog._id))}><FavoriteIcon color="primary"/>{blog.likes}</Button>
             </CardContent>
            </Card>
     );
}
 
export default Blog;

以下是减速器：

import { FETCH_ALL, FETCH, CREATE, DELETE, LIKE} from '../constants/actionType';

//Checking for action type and responding
export default (blogs =[], action) => {
    switch (action.type) {
        case FETCH_ALL:
            return action.payload;
        case FETCH:
            return action.payload;
        case CREATE:
            return [...blogs, action.payload];
        case DELETE:
            return blogs.filter((blog) => blog._id !== action.payload);
        case LIKE:
            return blogs.map((blog) => (blog._id === action.payload._id ? action.payload : blog));
        default:
            return blogs;
    }
}

---

由于您只将

id

作为

likeBlog

操作中的有效负载进行调度，因此，reducer中的

action.payload.\u id

未定义导致传递给

map

的回调为

blogs

数组中的每个项目返回旧blog对象（您正在比较

博客。_id

与

未定义的
）

您应该将更新的blog对象作为有效负载进行调度

dispatch({ type: LIKE, payload: id })

应该是

dispatch({ type: LIKE, payload: data })

由于您只将
id
作为
likeBlog
操作中的有效负载进行调度，因此，reducer中的
action.payload.\u id
未定义
导致传递给
map
的回调为
blogs
数组中的每个项目返回旧blog对象（您正在比较
博客。_id
与
未定义的
）

您应该将更新的blog对象作为有效负载进行调度

dispatch({ type: LIKE, payload: id })

应该是

dispatch({ type: LIKE, payload: data })

你能展示一下定义类似功能的代码吗？比如，在mern rnthe
likeBlog
action@Josh我编辑了它，这就是你需要的吗？你能检查一下你的likeBlog动作是否被调用了吗？如果是，那么请分享这个函数。你能展示定义like函数的代码吗个性化？比如说，减缩器、动作、api我是mern rnthe
likeBlog
action@Josh我编辑了它，这就是你需要的吗？你能检查一下你喜欢的日志操作是否被调用。如果是，那么请分享减速器到我们的传奇谢谢你的帮助我非常爱你哈，不客气。我们的传奇谢谢你的帮助我太爱你了哈，不客气。