React使用createSlice报属性赋值/声明或语句预期错误

问题背景 #

在React项目中首次使用createSlice创建状态切片时，VS Code在代码末尾标记括号、大括号语法错误，报错信息如下：

• Property assignment expected
• Declaration or statement expected

问题代码片段：

const querySlice = createSlice({
  name: 'querySlice',
  initialState,  
  reducers: {
    setOutputTable: (state, action: PayloadAction<string>) => {
      state.outputTable = action.payload;      
    },
    setInputTable: (state, action: PayloadAction<string>) => {
      state.inputTable = action.payload;      
    },
    setSelectColumns: (state, action: PayloadAction<string>) => {
      state.selectColumns = action.payload;      
    },
    reset() {
      return initialState;
    },
  },  
)};

问题根因 #

代码存在括号闭合顺序错误，属于基础语法问题：
createSlice是函数调用，入参是一个配置对象，嵌套结构的闭合顺序必须和开头顺序完全相反：

1. 开头顺序：createSlice( → 配置对象{ → reducers对象{
2. 对应闭合顺序：reducers对象} → 配置对象} → 函数调用)

问题代码末尾写的是)};，提前闭合了函数调用的圆括号，导致配置对象的花括号没有正确闭合，JS/TS解析器无法识别后续代码结构，抛出语法错误。

修正方案 #

将末尾错误的)};改为正确顺序的});即可，完整可运行代码参考：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 需提前定义initialState，示例结构可参考：
// const initialState = {
//   outputTable: '',
//   inputTable: '',
//   selectColumns: ''
// }

const querySlice = createSlice({
  name: 'querySlice',
  initialState,  
  reducers: {
    setOutputTable: (state, action: PayloadAction<string>) => {
      state.outputTable = action.payload;      
    },
    setInputTable: (state, action: PayloadAction<string>) => {
      state.inputTable = action.payload;      
    },
    setSelectColumns: (state, action: PayloadAction<string>) => {
      state.selectColumns = action.payload;      
    },
    reset() {
      return initialState;
    },
  },  
});

// 导出生成的action方法和reducer供业务使用
export const { setOutputTable, setInputTable, setSelectColumns, reset } = querySlice.actions;
export default querySlice.reducer;

同类问题排查建议 #

• 编写嵌套代码结构时，养成先写全成对括号、再填充内部内容的习惯，比如输入createSlice({后立刻补全})，光标移到括号中间写配置，从根源避免括号顺序错配
• 遇到括号类报错时，可利用VS Code的括号匹配功能：点击任意括号，编辑器会自动高亮匹配的对应括号，快速定位错配位置
• 修正括号后如果仍有类型报错，优先检查是否正确引入createSlice、PayloadAction依赖，以及initialState的类型定义是否和reducer中操作的属性匹配

内容的提问来源于stack exchange，提问作者Michael