Tworzę witrynę rekomensyfikatu książki, aby ćwiczyć stos mern, jednak właśnie wdrożyłem lubienie blogu, ale widzieć liczbę upodobań po tym, jak bardzo potrzebujesz, musisz odświeżyć stronę. Jak to naprawić?

Jest to komponent blogowy i na dole mam dwa przyciski, aby wysłać podobaczając post i usunięcie go. Po naciśnięciu usunięcia usuwa go ze strony, ale tym podobne nie działa.

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;

To jest app.js, gdzie jest Useffect:

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

Każda pomoc będzie mile widziana.

Edytować:

Oto podobne działania blogów:

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

Oto reduktory:

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;
    }
}
0
2F33T 13 kwiecień 2021, 19:46

1 odpowiedź

Najlepsza odpowiedź

Ponieważ wysyłasz tylko id jako ładunek w akcji likeBlog, action.payload._id w reduktorze undefined powoduje, że wywołanie przekazane map, aby przywrócić Stary obiekt blogu dla każdego elementu w tablicy blogs (porównujesz blog._id za pomocą undefined).

Zamiast tego powinieneś wysłać zaktualizowany obiekt blogu jako ładunek.

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

Powinien być

dispatch({ type: LIKE, payload: data })
2
Arun Kumar Mohan 13 kwiecień 2021, 17:36