将 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 中的这个二维数组状态中定位特定索引？

比方说，要访问带有 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 个之间），我将如何只更新这些索引？

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

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

在这个 question 中查看更多关于 sparse arrays 的信息，但这里的要点是不要使用它，即使它们占用的 space 不超过 "normal" ] 数组，你真正想要的是一个将键名映射到值的哈希机制，好老JSON

更新

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

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

const idsToUpdate = [1,22]

但是您不知道给定的 id 是否存在于您当前的集合中，解决方案是遍历每个项目，检查它们是否不为空，然后检查 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}
    }))
}))

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

Updating React state as a 2d array?

arrays

setstate

reactjs