Question

我正在使用react.js，并在构造函数中添加了this.setState()，但是它不起作用。这是我的代码-

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      age: '18'
    }
    this.setState({id: 'name'}); 
  }
  render(){
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

这将呈现第二个p标签，但不会呈现第一个标签？

Answer 1

setState函数除了设置状态外，还具有在更改时重新呈现的机制。

构造函数在实际安装组件之前执行，并且不会呈现任何内容。这就是为什么在构造函数中使用setState毫无意义。

所以您将需要像这样实现：

constructor(props) {
    super(props);

    this.state = {
      age: '18',
      id: 'name'
    }
  }

Answer 2

不要在构造函数或渲染方法中使用make make-java

如果创建内部构造函数时，

构造函数-将在创建实例时调用一次。

渲染-如果在渲染方法中使用setState()，它将变为无穷大，因为在使用setState()

时会进行重新渲染

如果要保存此类属性以声明，请在生命周期方法setState()

中进行操作

已改进

componentDidMount()

或直接按照年龄使用

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      age: '18'
    }
  }
  componentDidMount(){
    this.setState({id: 'name'}); 
  }
  render(){
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.value}</p>
      </div>
    )
  }
}

Answer 3

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      age: '18',
      id: '',
    }
  }

componentDidMount(){
 this.setState({id: 'name'}); 
}

  render(){
    return (
      <div>
        <p>{this.state.id}</p>
        <p>{this.state.age}</p>
      </div>
    )
  }
}

为什么this.setState（）在构造函数中不起作用？

3 个答案: