更新处于状态的数组中的数组中的值

Question

我正在尝试更新 shoeList 中 id 值的状态。目前我有一个允许输入新 ID 的文本字段，并且我希望在单击“确定”按钮时更新状态。

以下是一些相关代码：

state = {
    editingToggle: false,
    shoeList : [
      {name: 'bob', id: '123213-0', shoeSize: 'L'}
     ],
}

<TextInput className='text-area-header' id="textM" width="m" type="text" placeholder={this.state.shoeList[0].id}  />
<Button className="ok-button" variant="tertiary" size ='xs' type="button" handleClick={this.saveHeader}>OK</Button>

 saveHeader(e) {
    this.setState(state=> ({
     shoeList[0].name: 
    }))
    alert('Header changed to ' + this.state.shoeList[0].id);
    e.preventDefault();
  }

我不确定在 this.setState 中放什么，因为我没有找到任何关于如何通过谷歌搜索更新嵌套值的信息。此外，每当我将 value 属性添加到 TextInput 标签时，它都不允许我再在网页上的 textinput 中进行编辑。任何帮助都会很棒

Answer 1

考虑这个例子：

saveHeader() {
    this.state.shoeList[0].id = 'newid'
    this.setState({ shoeList: this.state.shoeList })
}

setState() 检查值是否已更改，如果没有更改，则不会更新组件。更改嵌套值不会更改对数组的引用，这意味着仅调用 setState() 是不够的。

有两种方法可以解决这个问题。首先是使用forceUpdate()：

saveHeader() {
    this.state.shoeList[0].id = 'newid'
    this.forceUpdate()
}

这会强制组件重新渲染，即使状态没有改变。

第二种方法是通过创建一个新的来实际更改 shoeList 数组：

saveHeader() {
    let newShoeList = this.state.shoeList.slice()
    newShoeList[0].id = 'newid'
    this.setState({ shoeList: newShoeList })
}

在数组上使用 .slice() 会创建一个完全相同的新数组。但是因为是新数组，所以 React 会注意到状态发生了变化并重新渲染组件。