Redux Toolkit初始state中用this引用同对象属性报undefined问题

该问题和Redux Toolkit（RTK）无关，是JavaScript原生的对象字面量this绑定规则导致的：

• ES Module环境默认运行在严格模式，顶层作用域的this本身就是undefined
• 对象字面量的属性初始化阶段，直接书写的this不会指向正在创建的对象本身，只有当对象的方法被调用时，方法内部的this才会绑定到对应的调用对象
• webpack编译后的结果完全符合JS运行规则，不存在编译异常或RTK对this的特殊限制。

你可以选择以下任意一种方式实现依赖同对象属性的初始值计算，优先推荐前两种静态计算的写法，稳定性更高：

• 提前提取公共常量再组装状态对象

// 提前定义固定的基础尺寸值
const DEFAULT_CANVAS_WIDTH = 390
const DEFAULT_CANVAS_HEIGHT = 800

const initialState = {
  canvas_1: {
    canvasName: "canvas_1",
    top: 500,
    left: 600,
    width: DEFAULT_CANVAS_WIDTH,
    height: DEFAULT_CANVAS_HEIGHT,
    xAxisSnap: [0, DEFAULT_CANVAS_WIDTH / 2, DEFAULT_CANVAS_WIDTH],
    yAxisSnap: [0, DEFAULT_CANVAS_HEIGHT / 2, DEFAULT_CANVAS_HEIGHT],
    selectedShapes: [],
    children: ["hi"],
  },
};

• 先创建基础对象，再追加依赖其他属性的字段

const initialState = {
  canvas_1: {
    canvasName: "canvas_1",
    top: 500,
    left: 600,
    width: 390,
    height: 800,
    selectedShapes: [],
    children: ["hi"],
  },
};
// 基础对象创建完成后，再计算依赖同对象属性的字段
const targetCanvas = initialState.canvas_1
targetCanvas.xAxisSnap = [0, targetCanvas.width / 2, targetCanvas.width]
targetCanvas.yAxisSnap = [0, targetCanvas.height / 2, targetCanvas.height]

• 使用getter访问器动态计算（不推荐）

const initialState = {
  canvas_1: {
    canvasName: "canvas_1",
    top: 500,
    left: 600,
    width: 390,
    height: 800,
    // 访问属性时动态计算值
    get xAxisSnap() {
      return [0, this.width / 2, this.width]
    },
    get yAxisSnap() {
      return [0, this.height / 2, this.height]
    },
    selectedShapes: [],
    children: ["hi"],
  },
};

注意：getter写法在RTK内置的Immer状态更新流程中可能出现值不一致、响应性异常等问题，非必要不要使用。

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