在redux状态内更新对象会引发错误

时间:2017-11-20 14:12:50

标签: javascript reactjs redux

我试图在我的reducer中更新对象内的数组。

const initialState = {
  group: {
    name: "",
    date: "",
    description: "",
    users: [],
    posts: []
  },
  morePosts: false,
  groups: []

};

export function groups(state = initialState, action) {
  switch (action.type) {
    .......
    case REQUEST_MORE_POSTS:
      {
        return {
          ...state,
          group:{
            ...state.group,
            posts: [
              ...state.group.posts,
              ...action.payload.posts
            ]
          },
          morePosts: action.payload.morePosts
        }
      }
    case ADD_NEW_POST:
      {
        return {
          ...state,
          group:{
            ...state.group,
            posts: [
              action.payload,
              ...state.group.posts
            ]
          }
        }
      }
    ........
    default:
      return state;
  }
}

不幸的是,在这两种情况下我都收到错误:

Console

当我从我的群组对象中提取帖子但我在里面需要它时它可以工作。 我无法弄清楚我在这里做错了什么。有人能指出我正确的方向吗?

以下是添加新帖子的动作创建者。

export function addPost(url, payload) {
  return function(dispatch) {
    axios.post(url + "php/addPostGroup.php", {payload}).then(response => {
      dispatch({
        type: ADD_NEW_POST,
        payload: response.data.post
      })
    })
  }
}

response.data.post是一个简单的对象。

我在发送之前添加了console.log()。这就是我的回答: console.log(response.data.post)

1 个答案:

答案 0 :(得分:0)

好吧我解决了。在获取任何数据之前,我的state.group.posts数组由于某种原因被视为未定义。我不得不使用

手动将其声明为空数组
var posts = state.group.posts != undefined ? state.group.posts:[];