发送调度时UseEffect不更新react网站数据

Question

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

这是博客组件，在底部我有两个按钮来调度喜欢帖子并删除它。一旦按下删除，它就会将其从页面中删除，但类似的不起作用。

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;

这是应用程序。js，其中useEffect为：

//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作为负载分派到类似于日志的操作中，操作。有效载荷_reducer中的id未定义，导致传递到映射的回调返回blogs数组中每个项目的旧blog对象（您正在将id与未定义的blog进行比较）。

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

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

应该是

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