将 React 状态更新为二维数组？

Question

给定这个二维数组 React 状态，

this.state =
  board: [
    [null, null, null, null],
    [null, {id: 21, canSelect: false}, null, null],
    [null, {id: 42, canSelect: false}, null, null],
    [null, null, null, null]
  ]
}

关于使用setState 更新此状态，我有 3 个主要问题：

1) 我如何在 React 的这个二维数组状态中定位一个特定的索引？ board[1][1]: {newObject} 之类的东西？

2) 我如何只更新每个的“canSelect”值？

3) 如果我需要更新未知数量的数组索引（比如 2 到 8 个），我将如何只更新这些索引？

非常感谢任何帮助:)

Answer 1

1) 我如何在 React 的这个 2d 数组状态中定位特定索引？

要访问假设，id = 21 的对象这样做：

console.log(this.state.board[1][1].id)

2) 我如何只更新每个的“canSelect”值？

要更改特定的 canSelect 属性，请以不可变的方式进行：

onChange = e => this.setState(state =>({
    ...state,
    board : state.board.map((arr, i) => arr.map((item,j) =>{
        if(!item.hasOwnProperty('canSelect') return item
        return {...item, canSelect: !state.board[i][j]}
    }))
}))

如果我需要更新未知数量的数组索引（比如 2 到 8 个），我将如何只更新这些索引？

如果你想要非连续数组（稀疏），只需创建一个对象，然后映射它的键而不是索引：

const obj = {myKey : 'foo'}
console.log(obj.myKey) //foo

在这个question 中查看更多关于sparse arrays 的信息，但这里的要点是不要使用它，即使它们不占用比“普通”数组更多的空间，你真正想要的是一种散列机制将键名映射到值，好老 JSON

更新

根据您的 cmets，我意识到我误解了第三个问题，但我并不排除它，因为它可能很有用。

因此，假设您要更新列表中包含的每个 id 的 canSelect 属性：

const idsToUpdate = [1,22]

但是您不知道给定的 ids 是否存在于您当前的集合中，解决方案将遍历每个项目，检查它们是否不为空，然后检查 id 是否在 idsToUpdate 列表中并且仅然后更新canSelect 属性：

this.setState(state =>({
    ...state,
    board : state.board.map((arr,i) => arr.map((item, j) =>{
        if(!item) return item
        if(!idsToUpdate.includes(item.id)) return item
        return {...item, canSelect: true}
    }))
}))