Question

我正在尝试使用React构建一个BattleShip游戏。

我在组件内部有一个这样的状态，每个坐标都有一个带有两个“状态”的列表，如果其中没有船（如果有，则为“忙”），则为“空”，而坐标为“完好无损”没有被击中（如果有的话被击中）。

this.state = {
  status: {
    A1: ['empty', 'intact'],
    B1: ['busy', 'intact']
  }
}

我想要做的是：当我在BattleShip网格中单击一个坐标进行射击时，我只想将列表中的第二个元素设置为“命中”，而将第一个元素保持不变< / strong>。

类似这样的东西：

handleClick = (e) => { const coord = e.target.id; //get the coord from the element clicked, like 'A1' this.setState({ status: { coord[1]: 'hit' } }); }

所以我希望我的新州成为：

this.state = { status: { A1: ['empty', 'hit'], B1: ['busy', 'intact'] } }

如何以正确的方式写this.setState({ status: { coord[1]: 'hit' } })，以使我的新州与上面完全一样？

Answer 1

let newStatus = {...this.state.status};
newStatus.A1[1] = 'hit';
this.setState({status: newStatus});

Answer 2

您可以为此使用属性访问器和切片。

例如：

root@5139993be066:/# kubectl describe pvc pvc
Name:          pvc
Namespace:     default
StorageClass:  zone1
Status:        Bound
Volume:        pv
Labels:        <none>
Annotations:   kubectl.kubernetes.io/last-applied-configuration={"apiVersion":"v1","kind":"PersistentVolumeClaim","metadata":{"annotations":{},"name":"pvc","namespace":"default"},"spec":{"accessModes":["ReadWriteO...
               pv.kubernetes.io/bind-completed=yes
Finalizers:    []
Capacity:      150Gi
Access Modes:  RWO
Events:        <none>

假设handleClick = (e) => { const coord = e.target.id; //get the coord from the element clicked, like 'A1' const current = this.state.status[coord]; let newVal = current.slice(); // Clone array newVal[1] = 'hit'; this.setState({ status: { ...this.state.status, [coord]: newVal } }); };是一个字符串。

Here是来自MDN的属性访问器的文档。

在组件中设置状态，但仅更改列表中的第二个元素

2 个答案: