Question

我是reactjs的新手，并试图制作一个组件。我在error[E0507]: cannot move out of borrowed content中设置了this.state，然后调用了一个方法：

componentWillMount()

但是在我的方法componentWillMount() { this.setState({ value: this.props.value || "0" }); this.changeCbState = this.changeCbState.bind(this); this.changeCbState(); } changeCBState中未定义：

this.state

错误：changeCbState() { console.log(this.state.value) }

Answer 1

问题可能是您在构造函数中没有初始化状态，并且由于this.setState是异步的，因此在尝试访问changeCbState函数之前，可能不会初始化状态。

由于应该弃用componentWillMount方法，因此您在constructor生命周期中编写的初始化代码也需要放入componentWillMount中。

constructor(props) {
    super(props);
        this.state = {
           value: this.props.value || "0"
        }
        this.changeCbState = this.changeCbState.bind(this); 
        this.changeCbState();
    }

Answer 2

您可能没有在构造函数中定义状态。使用构造函数在类实例上绑定方法并定义状态

class Something extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: props.value || '0' }
    this.changeCbState = this.changeCbState.bind(this);
  }
  componentWillMount() {
    this.changeCbState();
  }
  changeCbState() {
    console.log(this.state.value)
  }

}

Answer 3

setState以异步方式工作。这意味着在调用setState this.state之后，变量不会立即更改。因此，您应该使用回调函数在setState之后进行操作。

最好在构造函数中定义this.state。

Answer 4

在componentWillMount中设置状态被认为是反模式。看看这个资源https://vasanthk.gitbooks.io/react-bits/anti-patterns/04.setState-in-componentWillMount.html。

将状态设置为null的原因是因为您之前没有定义值，并且setState是异步操作。

您必须将初始状态设置如下：

class Mycomponent extends Component {
  constructor(super) {
    super(props);
    this.state = {
      value: this.props.value || "0",
    };
  }
}

Answer 5

这个问题有很多不同的答案，但是我的简单优雅的最爱答案是在定义此类功能时使用箭头功能。

class Something extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: props.value || '0' }
  }

  changeCbState = () => {
    console.log(this.state.value)
  }

  componentWillMount() {
    this.changeCbState();
  }


}

如果您想进一步了解JS中的binding这个问题。阅读this

ReactJS组件`this.state`未定义

5 个答案: