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

Question

我有以下状态。

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

并且我想通过我的 class 中的方法使用来自不受控制的表单的值更新 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

为什么不只是；

updateArray = (nickName) => {

  const updatedNickNames = [...this.state.friends.nickNames, nickName];

  this.setState({
    friends: {
      ...this.state.friends,
      nickNames: updatedNickNames
    }
  });

}

因为nickNames 只是一个字符串数组，您可以使用扩展运算符复制它。此外，使用 setState 您可以更改状态的特定部分，在您的情况下，您只需担心 friends 部分。

Answer 2

你可以直接使用

this.setState({
    friends: 
    {
      nickNames: [...this.state.friends.nickNames, nickName]
    }
  })

State 只能通过 setState 函数修改，因为如果直接修改它，可能会破坏 React 组件生命周期。

Answer 3

setState() in class 组件进行浅合并。

因此您可以忽略其他 "parent" 键并只关注 friends。

你也可以像这样简化它：

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

Answer 4

这是正确的做法。问题是你绝不能直接改变状态。就是这样。

我可能会给出更简洁的代码

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

updateArray = (nickName) => {
  this.setState(prevState => ({
    ...prevState,
    friends: 
    {
        ...prevState.friends,
        nickNames: [...prevState.friends.nickNames, nickname]    
    }
  }))

}

只要不直接改变状态，任何方式都可以通过setState()

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

Immutability and updating nested key of local state

javascript

immutability

reactjs