发送调度时，UseEffect未更新反应网站数据

Question

我正在创建一个图书推荐网站来练习MERN堆栈，但我刚刚实现了点赞博客，但要在点赞后查看点赞数量，需要刷新网站。我该如何解决这个问题？

这是博客组件，在底部我有两个按钮来发送点赞和删除帖子。一旦按下删除按钮，它就会将其从页面上删除，但点赞不起作用。

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;

这是useEffect所在的app.js：

//Imports
import React, {useState, useEffect} from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//Importing all components
import Home from './components/Home/Home';
import pageNotFound from './components/404/404';
import Blogs from './components/Blogs/Blogs';
import Form from './components/Form/Form';
import Navbar from './components/Navbar/Navbar';
import { useDispatch } from 'react-redux';
import {getBlogs} from './actions/blogs';
function App() {
const [currentId, setCurrentId] = useState(0);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getBlogs());
}, [dispatch]);
return (
<Router>
<div className="App">
<div className="Content">
<Navbar/>
<Switch>
<Route exact path="/">
<Home setCurrentId={setCurrentId} currentId={currentId}/>
</Route>
<Route exact path="/create">
<Form setCurrentId={setCurrentId} currentId={currentId}/>
</Route>
<Route component={pageNotFound} />
</Switch>
</div>
</div>
</Router>
);
}
export default App;

如有任何帮助，我们将不胜感激。

编辑：

以下是类似博客的操作：

export const likeBlog = (id) => async (dispatch) => {
try {
const { data } = await api.likeBlog(id);
dispatch({ type: LIKE, payload: id });
} catch (error) {
console.log(error);
}
}

以下是减速器：

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;
}
}

Answer 1

由于您只调度id作为有效负载。在likeBlog操作中，reducer中的action.payload._id是undefined，导致传递给map的回调返回blogs数组中每个项目的旧博客对象(您正在比较blog._id和undefined(。

您应该将更新后的博客对象作为负载进行调度。

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

应该是

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