Question

假设我想根据通过props传递的父变量来设置组件的初始状态。

class MyClass extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

我想设置这样的状态：

if (this.props.foo === 'bar') {
  this.setState({foo: 'bar'});
} else {
  this.setState({foo: 'notBar'});
}

我把它放在ComponentDidMount()中，似乎有效。但是，我应该将它移动到构造函数并使用语法this.state = {...}吗？或者它属于ComponentWillMount()？如果是这样，是否有保证及时提交州？（foo显示为文本字段）

Answer 1

由于您的州是根据适当的值分配的，因此处理它的好地方是将其分配到两个地方

ComponentWillMount / Constructor / ComponentDidMount：这些只在安装组件时执行一次。还有一件事是，如果你在componentWillMount或componentDidMount中设置了state，它应该至少在构造函数中初始化，这样你就不会得到一个未定义的状态错误。

ComponentWillReceiveProps：这个lifeCyle函数在安装时没有被调用，但是每次父进程都会重新渲染，所以每当prop foo从父进行更改时，它都可以在这里再次分配给状态

< / LI>

喜欢

signup() {
    this.setState({
      // When waiting for the firebase server show the loading indicator.
      loading: true
    });
    // Make a call to firebase to create a new user.
    firebaseApp.auth().createUserWithEmailAndPassword(
      this.state.email,
      this.state.password).then(() => {
        this.setState({
          // Clear out the fields when the user logs in and hide the progress indicator.
          email: '',
          password: '',
          loading: false
        })
        this.userFirebase.child(firebase.auth().currentUser.uid).update({
          first_name: this.state.first_name,
          last_name: this.state.last_name,
        })
        NavigationActions.Venue()
    }).catch((error) => {
      // Leave the fields filled when an error occurs and hide the progress indicator.
      this.setState({
        loading: false
      });
      Alert.alert('Hold on to your baristas, first a few basics!', error.message );
    });
  }

Answer 2

是的，在构造函数中初始化状态是有效的：React Constructor Docs

所以你的代码如下：

class MyClass extends Component {
  constructor(props) {
    super(props);

    if (props.foo === 'bar') {
      this.state = {foo: 'bar'};
    } else {
      this.state = {foo: 'notBar'};
    }
  }
}

但是，请注意，对此组件中的props的任何更改都不会在此组件中更新，因为它只在构造函数上设置。

因此，如果您不希望父道具发生变化（这可能很少见），这只是初始化状态的好方法。请查看Lifting State Up以获得更好地构建组件的指南。

在React组件中何处设置与props相关的状态？

2 个答案: