Reactjs组件`this.state` undefined

Question

我是reactjs的新手，并试图制作一个组件。我在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)
    }

错误：Uncaught TypeError: Cannot read property 'value' of null

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。

将state设置为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