Question

React docs说我们不应该在不使用this.state的情况下改变this.setState。然而，使用init状态var来重置表单和其他类似情况是有效的。 1据我所知，我的实施方案符合有关状态变异的反应文档，我是否正确？

export default class SomeComp extends Component {
  initState = {
    demo: true,
    company: '',
    name: '',
    email: '',
    options: ''
  }

  state = {...this.initState }
...

[2]我明白我们应该只使用super，如果我们必须在我们类的构造函数中调用它。如下所示：

export default class SomeComp extends Component {
 constructor() {
  super(props, state)
  this.props... //do something
  this.state... //do some more
 }
...

我是否正确，您能否在构造函数中提供一个常见的真实世界用例？

Answer 1

official docs以下点：

在安装之前调用React组件的构造函数
在实现React.Component子类的构造函数时，应在任何其他语句之前调用super(props)。否则，this.props中的undefined将为constructor，这可能会导致错误。
避免在构造函数中引入任何副作用或订阅。对于这些用例，请使用componentDidMount()代替
构造函数：初始化状态的正确位置。为此，只需将对象分配给this.state;不要尝试从构造函数中调用setState()。构造函数通常也用于将事件处理程序绑定到类实例。
如果你没有初始化状态并且你没有绑定方法，那么你不需要为你的React组件实现一个构造函数。

要发生的事情：

你有this.props... //do something无效，因为你无法改变道具。
super应该被称为super(props)。你不能通过国家而你也不需要。

＆＃13;

class SomeComp1 extends React.Component {
  state =  {
    demo: true,
    company: 'example',
    name: '',
    email: '',
    options: ''
  };
  
 render() {
  return <div>company1: {this.state.company} </div>;
 }
}


class SomeComp2 extends React.Component {
  constructor(props) {
    super(props);
    this.state =  {
      demo: true,
      company: 'example',
     name: '',
      email: '',
      options: ''
    };
  }
  
 render() {
  return <div>company2: {this.state.company} </div>;
 }
}
 
 
 ReactDOM.render(
  <div>
    <SomeComp1 />
    <SomeComp2 />
   </div>,
  document.getElementById('root')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

＆＃13;

在反应中调用超级和变异状态

1 个答案: