【问题标题】:Redux reducer - modifying array with forEachRedux reducer - 使用 forEach 修改数组
【发布时间】:2019-09-25 15:17:35
【问题描述】:

在获取和基于响应更新我在 Redux 中的状态中的数组时遇到了一个小问题。

首先,我在操作中使用 forEach 完成了整个数组更新(基于我的初始状态对象)并将其发送到 reducer,它工作正常。简单的。

然后阅读教程,修改应该只在 reducer 中完成,并且该操作应该只处理获取响应。所以我尝试过这种方式,两种方式,都失败了。

在这两种情况下,我发送给 reducer 的有效负载只是我得到的就绪响应。

有人可以告诉我哪里出了问题以及在减速器中执行此操作的正确方法是什么?

这两种方法都不起作用:

export const handleMusicCards = (state = musicState, action = {}) => { 开关 (action.type) {

case REQUEST_MUSIC_SUCCESS:
  return Object.assign({}, state, {
    musicStateItemList: state.musicStateItemList
      .forEach((el, i) => {
        el.track = action.payload.message.body.track_list[i].track.track_name;
        el.album = action.payload.body.track_list[i].track.album_name;
        el.artist = action.payload.body.track_list[i].track.artist_name;
        el.id = action.payload.body.track_list[i].track.track_id;
        el.favClicked = false;
        el.addedToFav = false;
      }),
    isLoading: false
  });

} }

export const handleMusicCards = (state = musicState, action = {}) => { 开关 (action.type) {

case REQUEST_MUSIC_SUCCESS:
  return Object.assign({}, state, {
    musicStateItemList: state.musicStateItemList
      .forEach((el, i) => {
        return {
          ...el,
          track: action.payload.message.body.track_list[i].track.track_name,
          album: action.payload.message.body.track_list[i].track.album_name,
          artist: action.payload.message.body.track_list[i].track.artist_name,
          id: action.payload.message.body.track_list[i].track.track_id,
          favClicked: false,
          addedToFav: false,
        }
      }),
    isLoading: false
  });

} }

【问题讨论】:

  • Array.prototype.forEach 不会向调用者返回任何内容,您确定您不是要使用 Array.prototype.map 来代替吗?
  • 是的,抱歉,在第二个示例中应该是地图。仍然无法正常工作,这次出现错误“无法读取未定义的属性 'body'”,这很奇怪。

标签: reactjs redux


【解决方案1】:

阅读后我不确定故障发生在哪里。更多关于 redux 约定的内容。

动作对象仅用于描述应该对状态进行哪些更改。 reducer 是实际应该更改状态的地方。在 redux 中,您永远不想修改状态对象,而是希望复制它并返回一个带有更改的新对象,如操作对象所述。

所以你可能有一个看起来像这样的减速器案例......

const reducer = (state, action) => {
    switch (action.type) {
        case NEW_RECORD_SUBMIT :
            return {
                ...state,
                newRecordStatus: action.status,
            };
    default :
          return state;
  }
};

【讨论】:

    【解决方案2】:

    现在解决了。非常愚蠢的错误,switch语句中的错误大小写......我尝试了第二个选项,使用map()

    【讨论】:

      猜你喜欢
      • 2018-04-30
      • 2020-04-16
      • 1970-01-01
      • 2017-07-24
      • 2019-02-03
      • 2018-11-14
      • 2019-07-23
      • 1970-01-01
      • 2021-10-17
      相关资源
      最近更新 更多