javascript - 不变性和更新本地状态的嵌套键

Question

我有以下状态。

state = {
  friends: {
    nickNames: ['Polly', 'P', 'Pau'],
    ... here more k:v
    },
  }
}

我想通过我的类中的一个方法，用一个来自不受控制的表单的值来更新 nickNames 数组。但是，我在确定我是否正确设置状态而不改变状态时遇到了问题。

我正在做以下事情

updateArray = (nickName) => {

  const tempDeepCopy = {
    ...this.state,
    friends: {
      ...this.state.friends,
      nickNames: [...this.state.friends.nickNames]
    }
  }

  tempDeepCopy.friends.nickNames.push(nickName)

  this.setState({
    friends: 
    {
      nickNames: tempDeepCopy.friends.nickNames
    }
  })

}

这是正确的做法吗？如果是这样，它也是给定状态下最有效的吗？我试图避免使用辅助库来学习如何进行深度复制。

我会很感激帮助，因为我正在尝试学习不可变性，这是一个让我付出很多努力的概念。

Answer 1

setState()在类组件中进行浅合并。

因此您可以忽略其他“父”键并只关注 friend 。

你也可以像这样简化它:

this.setState({
  friends: { // only focus on friends
    ...this.state.friends, // do not ignore other friend k:v pairs
    nicknames: [
      ...this.state.friends.nicknames,
      nickName
    ]
  }
})