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

问题描述

我正在创建一个图书推荐网站来练习 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;
    }
}

解决方法

由于您仅分派 id 作为有效负载在 likeBlog 操作中，reducer 中的 action.payload._id 为 undefined，导致回调传递给 map为 blogs 数组中的每个项目返回旧博客对象（您将 blog._id 与 undefined 进行比较）。

您应该将更新后的博客对象作为负载分派。

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

应该

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