在 redux 中使用來自 state 的返回數據時出現錯誤

Question

當我嘗試更新任何帖子時，它會在數組中返回一個數組，如下所示

((3) [{…}, 數組(3), 數組(3)])

這是第一個帖子和兩次相同的數組，所以當我在更新一個帖子后渲染帖子時，只顯示更新后的帖子

這是調度動作的代碼

export const updatePost =(id, post) => async (dispatch) => {
try {
    const {data}  = await api.updatePost(id, post)
    dispatch({type:'UPDATE',payload:data})
    // console.log(data)

} catch (error) {
    console.log(error.mesage)
    
}

}

這就是行動

export default (posts=[],action) =>{
switch (action.type) {
    case 'FETCH_ALL':
        return action.payload
    case 'CREATE':
        return [...posts, action.payload]
    case 'LikePost':
    case 'UPDATE':
            // return [...posts, action.payload]
          return  posts.map(post => post._id===action.payload._id ? action.payload : posts)
    case 'DELETE':
        return posts.filter((post)=> post._id!==action.payload)
  

    default:
        return posts
} }

這是減速機

import { combineReducers } from "redux";
import posts from './Posts'
export default  combineReducers({posts})

這是我從 redux state 獲取數據的方法

 import { Grid, CircularProgress } from '@material-ui/core';
 import { useSelector } from 'react-redux';

 import Post from './Post/Post';
 import useStyles from './Styles';

const Posts = ({ setCurrentId }) => {
const posts = useSelector((state) => state.posts);
const classes = useStyles();

return (
 !posts.length ? <CircularProgress /> : (
   <Grid className={classes.container} container alignItems="stretch" spacing={3}>
     {posts.map((post) => (
       <Grid key={post._id} item xs={12} sm={6} md={6}>
         <Post post={post} setCurrentId={setCurrentId} />
       </Grid>
     ))}
   </Grid>
 )
);
};

export default Posts;

Answer 1

問題出在你的行動上； 您正在這一行中自己創建這個嵌套數組：

return posts.map(post => {
  post._id === action.payload._id ? // if this is the post
    action.payload :                // use updated data
    posts                           // --error--: copy entire posts array
})

因此，對於每個未更新帖子的元素，您將用整個帖子數組替換它。 如果您想使用此模式，只需將posts替換為post ：

return posts.map(post => post._id === action.payload._id ? action.payload : post)