Блог

Главная - Вопросы по программированию - Ошибка типа: неопределенный не является объектом (вычисляется ‘const.join’)

Ошибка типа: неопределенный не является объектом (вычисляется ‘const.join’)

#firebase #react-native #expo

#firebase #react-native #выставка

Вопрос:

Как объявить массив в переменной состояния

Я использую 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 в defined не знаю, почему может быть связано с тем, что значение 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>
    );
  }
}

Комментарии:

1. Прежде всего, вы не можете вернуть два View файла в своем рендеринге, вам нужно вернуть только один, View который содержит оба View файла

2. Во-вторых, вам нужно указать, как this.props.user происходит, потому что, если ageRangeValue значение не определено, это из-за того, что происходит из props

3. Значение distanceValue работает, а значение ageRangeValues — нет. они приходят с другой страницы, и пользовательский uid передается вместе с параметрами навигации

4. Что вы получаете, когда используете console.log this.props.user.ageRange ?

5. Он выдает массив [19 34]

Ответ №1:

Попробуйте это с помощью constructor

 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>
    );
  }

Комментарии:

1. Большое спасибо за вашу помощь, после добавления конструктора я получил это: ошибка типа: неопределенный не является объектом (вычисляется ‘_this.props.user’)

2. почему вы добавляете «_» перед этим словом? его там не должно быть!

Ответ №2:

Венковский был прав на странице предварительного просмотра, которая передает данные

 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');
      }
    });
  }

Изменение const user = firebase.auth().CurrentUser; на const user = snap.val();
сделал трюк