Question

我是React Native的新手。我在我的组件上有这个代码：

  constructor(props){
    super(props);
    this.state = {
      userCategoryType: ''
    }
  }

  componentWillMount() {
    let CategoryType;
    firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
      if (!snapshot) {
          console.log('An error occured');
      } else {
          CategoryType = snapshot.val().CategoryType;
          alert(CategoryType); // this works
      };
    });
    this.setState({
      userCategoryType: CategoryType,
      loading: false
    });
  }

  render() {        
     alert(this.state.userCategoryType);
     alert(this.state.CategoryType);
  }

在render（）中，当我尝试访问this.state.userCategoryType或this.state.CategoryType时，我收到一条消息'undefined'。

我做错了什么？感谢任何帮助。

Answer 1

我对它进行了测试，如果您以这种方式使用该组件，则可以查找。

   constructor(props){
        super(props);
        this.state = {
          userCategoryType: '',
          CategoryType: '',
          loading: false, // change the initial value if you want 
        }
      }   

   componentWillMount() {
        let CategoryType;
        firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
          if (!snapshot) {
              console.log('An error occured');
          } else {
              CategoryType = snapshot.val().CategoryType;
          };
        });
        this.setState({
          userCategoryType: CategoryType,
          loading: false
        });
      }

注意：我没有检查您的火力基础代码。

Answer 2

由于我可以访问Firebase代码中的值而不是外部代码，因此我将代码调整为：

firebase.database().ref('/users/' + userId).on('value', snapshot => {
                            this.setState({
                                    CategoryType: snapshot.val().CategoryType,
                                          })
                                                                     });

我可以使用：

访问render（）中CategoryType中的值

alert(this.state.CategoryType);

Answer 3

I think the problem is that calling setState in ComponentWillMount does not cause a rerender. Try changing ComponentWillMount to ComponentDidMount since this is the recommended lifecycle method for this kind of logic and will cause rerendering on setState.

https://facebook.github.io/react/docs/react-component.html#componentwillmount

本机反应 - 为什么this.state未定义？

3 个答案: