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

Posted 2023-02-22

【中文标题】将 React 状态更新为二维数组？

【英文标题】：Updating React state as a 2d array?

【发布时间】：2019-11-30 12:07:03

【问题描述】：

给定这个二维数组 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 个），我将如何只更新这些索引？

非常感谢任何帮助:)

【问题讨论】：

你尝试了什么？

【参考方案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
    ))
))

【讨论】：

谢谢你，特别是回答 #2。我经常忘记扩展运算符有多么有用。对于＃3，我有一个澄清的问题。我不确定如何使用对象来帮助我更新未知数量的索引的状态。或者您是否建议首先在这里使用二维数组不是最好的方法？

对不起，我可能误解了你的问题。您想知道如何更新未知数量的索引吗？

别担心，我会尽力澄清。在这个 4x4 二维数组中，有 16 个索引。假设其中 8 个被设置为对象而不是 null。根据用户输入，我将不得不更新其中只有 5 个的 canSelect 值（但可能在 2 到 7 之间，因为它是用户确定的）。我只想更新那些用户选择的 5 个索引，而不是其他任何索引

感谢您的更正，以及您的快速答复。我从你的回答中得到的两个主要结论是 1）我以前见过 setState 中使用的扩展运算符，但直到现在我才理解实际应用。 2）我不知道在设置值时我可以执行如此复杂的map 和条件语句。再次感谢:)