Question

我的代码看起来像这样

componentWillMount(){
    lotGroups = // backend call to fetch lotgroups
    setState({
        lotGroups
    )};
}

稍后我要更改lotGroups（仅使用setState）时，我想存储完整的lotGroups集的初始副本。最好的方法是什么？我尝试将变量添加到状态，然后在componentWillMount（）中对其进行更新，但是它不起作用。一旦lotGroups更新，它也将更新。

Answer 1

问题是必须在构造函数中同步设置组件的初始状态，即：

constructor (props) {
  super(props)
  this.state = {
    lotGroups = 'initial state'
  }
}

然后您可以从后端调用异步更新componentWillMount中的状态，即：

componentWillMount () {
  fetch('backend.com')
    .then(res => res.json())
    .then(lotGroups => {
      this.setState({
        lotGroups
      })
    })
}

或者如果您使用的是async/await：

async componentWillMount () {
  const res = await fetch('backend.com')
  const lotGroups = await res.json()

  this.setState({
    lotGroups
  })
}

如果要存储lotGroups的内容以供以后使用而不引起组件刷新，可以跳过构造函数中的状态设置并使用：

componentWillMount () {
  fetch('backend.com')
    .then(res => res.json())
    .then(lotGroups => {
      this.lotGroups = lotGroups
    })
}

以后您可以将其引用为this.lotGroups

希望这会有所帮助。

Answer 2

您可以在组件中使用这种状态。

 state = {
  lotGroups = 'default value';
}

或在内部构造函数中

constructor(props) {
super(props);
state = {
  lotGroups = 'default value';
}
}

请不要在componentWillUpdate（）中更新状态，它会在状态更新后调用render，从而导致性能问题。不必要的渲染调用。

如何防止React中的状态不影响变量

2 个答案: