UseEffect 在发送发送时不更新反应网站数据

Question

我正在创建一个书籍推荐网站来练习 MERN 堆栈，但是我刚刚实现了对博客的点赞，但是要在您点赞后查看点赞数量，您需要刷新 site.How 我是否修复这个？

这是博客组件，在底部我有两个按钮可以发送喜欢 post 和删除它。按下删除后，它会将其从页面中删除，但类似的操作不起作用。

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;

这是 app.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 作为有效载荷在 likeBlog 操作中，reducer 中的 action.payload._id 是 undefined 导致回调传递给 map 到 return blogs 数组中每个项目的旧博客对象（您将 blog._id 与 undefined 进行比较）。

您应该改为将更新后的博客对象作为负载发送。

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

应该是

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

UseEffect 在发送发送时不更新反应网站数据

UseEffect not updating react web site data when dispatch sent

javascript

reactjs

mern