在状态下更新数组中数组中的值

Question

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

以下是一些相关代码：

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中的内容，因为我没有找到有关如何通过Google搜索更新嵌套值的任何信息。同样，每当我将值属性添加到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会注意到状态已更改并重新呈现组件。