时间戳

首页 > 解决方案 > TypeError: undefined is not an object (评估'const.join')

firebase - TypeError: undefined is not an object (评估'const.join')

问题描述

如何在状态变量上声明数组

我使用 react native expo 和 firebase 都是最新的 

export default class Profile extends Component {
  state = {
    ageRangeValues: this.props.user.ageRange,
    distanceValue: [this.props.user.distance],
}
render() {
    const {
      ageRangeValues,
      distanceValue,
    } = this.state;

return (
      <View>
      <Slider
        min={5}
        max={100}
        values={distanceValue}
        onValuesChange={val => this.setState({ distanceValue: val })}
        onValuesChangeFinish={val => this.updateUser('distance', val[0])}
      />
    <Slider
        min={18}
        max={70}
        values={ageRangeValues}
        onValuesChange={val => this.setState({ ageRangeValues: val })}
        onValuesChangeFinish={val => this.updateUser('ageRange', val)}
      />
        </View>) }

我希望这可以正常工作，但ageRangeValue 未定义但定义中的distanceValue 不知道为什么可能是因为ageRangeValue 需要ageRange 及其数组。如果我声明 areRangeValue: [19, 20]，一切正常，但如果我保持原样，我的所有值都是未定义的

这是我的预载

const firebaseConfig = {
  apiKey: 'XXXXXXXXX',
  databaseURL: 'XXXXX',
  storageBucket: 'XXXXX',
};

firebase.initializeApp(firebaseConfig);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: null,
    height: null,
    resizeMode: 'contain',
  },
});

export default class Preload extends Component {
  constructor() {
    super();
    this.loadApp();
    // SVGAnimatedLengthList.loadApp();
  }

  authenticate = (token) => {
    const provider = firebase.auth.FacebookAuthProvider
    const credential = provider.credential(token);
    return firebase.auth().signInWithCredential(credential);
  };

_goHome = (user) => {
  const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Home', params: { user } })],
  });
  this.props.navigation.dispatch(resetAction);
};

  loadApp = async () => {
    //firebase.auth().signOut();
    firebase.auth().onAuthStateChanged((auth) => {
      if (auth) {
        this.firebaseRef = firebase.database().ref('users');
        this.firebaseRef.child(auth.uid).on('value', (snap) => {
          const user = firebase.auth().currentUser;
          if (user != null) {
            this.firebaseRef.child(auth.uid).off('value');
            this._goHome(user);
          }
        });
      } else {
        this.setState({ showSpinner: false });
        this.props.navigation.navigate('Login');
      }
    });
  }

  render() {
    return (
      <ImageBackground source={require('./images/fondo.png')} style={styles.container}>
        <ActivityIndicator />
      </ImageBackground>
    );
  }
}

标签： firebasereact-nativeexpo

解决方案

用构造函数试试

export default class Profile extends Component {
  constructor(){
    super();
    this.state = {
      ageRangeValues: this.props.user.ageRange,
      distanceValue: [this.props.user.distance],
    };
  }

  render() {

    const { ageRangeValues, distanceValue } = this.state;

    return (
      <View>
        <Slider
          min={5}
          max={100}
          values={distanceValue}
          onValuesChange={val => this.setState({ distanceValue: val })}
          onValuesChangeFinish={val => this.updateUser('distance', val[0])}
        />
        <Slider
          min={18}
          max={70}
          values={ageRangeValues}
          onValuesChange={val => this.setState({ ageRangeValues: val })}
          onValuesChangeFinish={val => this.updateUser('ageRange', val)}
        />
      </View>
    );
  }

推荐阅读