繁体   English   中英

在 redux 中使用来自 state 的返回数据时出现错误

I have an error when using returning data from state in redux

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

当我尝试更新任何帖子时,它会在数组中返回一个数组,如下所示

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


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)
2 React/Redux 我有两个组件,我想使用 handleClick 将一个组件中的数据传递给另一个组件

我有一个从数组中生成成对名称的组件,在这个组件中,我需要选择名称,使其突出显示,然后当我选择使用不同组件中的提交将其添加到本地状态的新数组中。 我也希望能够选择或取消选择该条数据。 减速器和动作已设置,我需要本地方法或函数来执行此操作,我知道可能需要一些提升状态但无法解决。 这是我使用按钮和 o ...

3 当数据被继承时,使用 React-Redux 从减速器而不是从根 state 更改 state

下午好。 我正在使用 react-redux 编写应用程序并面临两难境地。 我已经重新思考了好几次,无法选择如何正确方便地组织项目和数据结构。 通过继承或组合数据来设计数据。 我最初是沿着作曲的道路走的,但我意识到当存在一对一的关系时很不方便。 我决定将其更改为 inheritance,因为从数据 ...

5 我在使用反应从 redux 调用 state 时遇到了一些麻烦

嗨,我是新手,我正在使用 redux 制作简单的购物车应用程序并为练习做出反应。 我调用产品 api 数据并将其保存在称为产品的商店中,当用户单击按钮时,它应保存在称为“购物车”的 state 中。 当我 console.log(props.state.cart) 向我显示用户单击的数据但如果我尝试 ...

6 不使用Redux时如何存储来自服务器的数据

我是本机反应的新手。 到目前为止,我有一个日记应用程序,它是内置在rails中的Web应用程序。 用户有许多日记帐分录。 当他们登录到应用程序时,我想拉出他们以前的所有条目并将其显示给他们。 我的问题是这样的: 当他们登录时,我提取了他们过去的所有条目时,如何将其存储在哪里 ...

10 React redux:当组件更新时,来自状态的数据变化很奇怪

我是新来的本地人。 我3天后面临一些奇怪的问题。 我有一个具有子组件的组件(3个子组件)。 我使用react-native-elements中的ButtonGroup元素在子组件之间切换 当我从api获取数据时,第一次我的子组件1被正确加载了预期数据但是当我切换到子组件2(或子组件3 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM