react 修改数组中的某一项数据或者对象中的某个key

数据

[
    {
        name: `shopping`,
        complete: false
    },
    {
        name: `running`,
        complete: false
    }
]

如果要修改数组中的第一项的complete的值, 在vuethis.$set(this.arr[0],complete, true)即可, 修改之后数据会自动更新驱动视图,而在react中是这样的


数组

updateItem = item => {
    // 首先拿到 item 的索引, 也可以从参数中传递过来
    let index = this.state.arr.indexOf(item)
    // 然后根据索引修改
    this.state.arr[index][`complete`] = true
    // 这个时候并不会更新视图, 需要 setState更新 arr 
    // (注意 setState 是一步操作, 不要轻易去根据 setstate 的状态去做接下来的事情), 非要这样的话可以给 setState 传递一个函数`this.setState(() => {})`进行操作
    this.setState({
        arr: this.state.arr
    })
}

对象

updateItem = newValue => {
    // 基本同理
    this.state.obj.key = newValue
    this.setState({obj: this.state.obj})
}