Question

我很反应和减少。我正在尝试使用扩展运算符并在尝试使用扩展运算符时遇到编译错误。

export default function chaptersReducer(
  state = { chapters: {}, isFetching: false, error: false },
  action = {},
) {
  switch (action.type) {
    case REQUEST:
      return { ...state, isFetching: true, error: false };
    case SUCCESS:
       return {
         ...state,
         chapters: {
           ...state.chapters,
           action.payload
         },
         isFetching: false
       };
    case FAILURE:
      return { ...state, isFetching: false, error: true };
    default:
      return state;
  }
}

我得到的具体错误就是这个。（在SUCCESS案例中）

Syntax error: Unexpected token, expected , (27:44)
> 27 |         chapters: {...state.chapters, action.payload},
     |                                             ^

也许我错过了一些非常明显的东西，但有人可以帮我弄清楚发生了什么吗？

编辑：我正在使用create-react-app，redux和react-redux

Answer 1

chapters: {
    ...state.chapters,
    action.payload
},

不确定你想要什么，这里

chapters: {
    ...state.chapters,
    ...action.payload
},

可能？

未指定密钥（{ someProp }）是{ someProp: someProp }的简写，需要简单的密钥（即action.payload不起作用）

无论哪种方式，你都需要一把钥匙，即

chapters: {
    ...state.chapters,
    chapterN: action.payload
},

或完全替换

chapters: action.payload

编辑：我看到您的评论

给定action.payload =＆gt; { someId: { ... some payload ... } }，

chapters: {
    ...state.chapters,
    ...action.payload
},

可能非常接近你想要的。如果您还将mangaId作为字段传递给{ id: mangaId, payload: { ... some payload ... } }，那么您需要

chapters: {
    ...state.chapters,
    [action.mangaId]: action.payload
},

使用React和Redux传播运算符错误

1 个答案: