Question

所以我有这样的 stateUpdater

stateUpdater(field, val){
    let obj = {...this.state.json}
    obj[field] = val
    this.setState({json: obj})
  }

（它从Main传递给子组件，因此我可以在较低级别的事件上更新Main状态。）

我有 componentDidUpdate 这样

 componentDidUpdate(prevProps, prevState){
    console.log(prevState.json.ingredient_groups)
    console.log(this.state.json.ingredient_groups)
    ...
 }

因此，当我从json.ingredient_groups中的数组中删除元素时，它会记录

Array[7]
Array[7]

但预期的行为是

Array[8]
Array[7]

致力于：

使用 spread运算符， JSON.parse（JSON.stringify（obj））在stateUpdater中复制 obj ， Object.assign（{}，obj）
更新状态

像这样

 stateUpdater(field, val){
    let obj = {...this.state.json}
    this.setState((prevState, props) => {
        return {json: Object.defineProperty(obj, field, val)}
    })
 }

使用 getSnapshotBeforeUpdate（）

这些都没有帮助

Answer 1

事实证明，JS通过值和对象（也是数组）通过基元（数字，布尔值，字符串）参考。

因此，当您处理复杂的状态对象并将对象作为道具传递给子组件时，更改上级状态确实很容易。

对我来说，是这样的输入字段更改处理程序

handleInput(e) { let data = this.state.data data.input = e.target.value this.setState({data}) }

因为来自this.state的数据是一个对象，所以它通过引用传递状态在行上发生了变异

data.input = e.target.value

在setState发生之前。

为什么prevState等于componentDidUpdate中的this.state？

1 个答案: