将函数添加到初始状态的属性后,Redux切片返回错误

insrf1ej  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(119)

我有一个Redux Slice,我想定义一个属性和它自己的兄弟属性。在这个例子中,我想定义一个playableFields属性和widthheight属性。但是当我写这个函数的时候,reducer带来了问题。我使用的是Typescript,所以也许你应该考虑一下。
Redux切片文件:

import { createSlice } from "@reduxjs/toolkit"

const levelSlice = createSlice({
  name: "level",
  initialState: {
    ... //other states
    gridSizeAndPlayableFields: {
      width: 8,
      height: 9,
      playableFields: function() { // <---- problems comes after adding this function
        return (
          {
            rows: 
              [...Array(this.height)].map(()=>
                (
                  {
                    cells: 
                      [...Array(this.width)].map(()=>
                        (
                          {status: true}
                        )
                      )
                  }
                )
              )
          }
        )
      }
    }
  reducers: {
    ... //other reducers
    changeGridSize: (state, action) => {
      state.gridSizeAndPlayableFields.width = action.payload.width,
      state.gridSizeAndPlayableFields.height = action.payload.height
    },
    changePlayableFields: (state, action) => {

      const i = action.payload.i
      const k = action.payload.k

      const localTable = {...state.gridSizeAndPlayableFields.playableFields}

      localTable.rows[i].cells[k].status = !localTable.rows[i].cells[k].status

      state.gridSizeAndPlayableFields.playableFields = localTable
    }
  }
})

如果你想知道这个切片是做什么的,这里我离开了那个图像。它定义了一个关卡的可玩区域。当你点击一个盒子时,它会根据情况变成假或真。上面的滑块定义了盒子的大小...

以下是CodeSandbox链接:https://codesandbox.io/s/naughty-framework-nkbfnd?file=/src/redux/levelSlice.tsx

ev7lccsx

ev7lccsx1#

我通过使用状态更改组件中的所有数据并将它们发送到幻灯片来找到解决方案。

相关问题