Что я делаю не так с моим кодом здесь я так потерян

Question

Я пытаюсь ввести свое пожарное хранилище в форму и поместить все свои пользовательские данные, чтобы я мог передать информацию как

profile.name

profile.email

profile.location

profile.avatar

так что я делаю не так, чтобы продолжать получать эту ошибку?

Ошибка

Это мой макет экрана

    import Fire from '../utilities/Fire';

            super(props);
            this.state = {
               user: {}
            }

               const user = this.props.uid || Fire.shared.uid

               this.unsubscribe = Fire.shared.firestore
                   .collection("users")
                   .doc(user)
                   .onSnapshot(doc => {
                       this.setState({ user: doc.data() });
                   });

               this.unsubscribe();


           unsubscribe = null;

          const profile = {
            username: this.state.user.name,
            location: this.state.user.location,
            email: this.state.user.email,
            avatar: this.state.user.avatar ? { uri: this.state.user.avatar } : require("../assets/avatar.png"),
            notifications: true,
          };

          export { profile };

Это моя страница настроек

import React, { Component } from "react";
import { Image, StyleSheet, ScrollView, TextInput } from "react-native";

import { Divider, Button, Block, Text, Switch } from "../components";
import { theme, mock } from "../constants";

class Settings extends Component {
  state = {
    notifications: true,
    editing: null,
    profile: {}
  };

  componentDidMount() {
    this.setState({ profile: this.props.profile });
  }

  handleEdit(name, text) {
    const { profile } = this.state;
    profile[name] = text;

    this.setState({ profile });
  }

  toggleEdit(name) {
    const { editing } = this.state;
    this.setState({ editing: !editing ? name : null });
  }

  renderEdit(name) {
    const { profile, editing } = this.state;

    if (editing === name) {
      return (
        <TextInput
          defaultValue={profile[name]}
          onChangeText={text => this.handleEdit([name], text)}
        />
      );
    }

    return <Text bold>{profile[name]}</Text>;
  }

  render() {
    const { profile, editing } = this.state;

    return (
      <Block>
        <Block flex={false} row center space="between" style={styles.header}>
          <Text h1 bold>
            Settings
          </Text>
          <Button>
            <Image source={profile.avatar} style={styles.avatar} />
          </Button>
        </Block>

        <ScrollView showsVerticalScrollIndicator={false}>
          <Block style={styles.inputs}>
            <Block row space="between" margin={[10, 0]} style={styles.inputRow}>
              <Block>
                <Text gray2 style={{ marginBottom: 10 }}>
                  Username
                </Text>
                {this.renderEdit("username")}
              </Block>
              <Text
                medium
                secondary
                onPress={() => this.toggleEdit("username")}
              >
                {editing === "username" ? "Save" : "Edit"}
              </Text>
            </Block>
            <Block row space="between" margin={[10, 0]} style={styles.inputRow}>
              <Block>
                <Text gray2 style={{ marginBottom: 10 }}>
                  Location
                </Text>
                {this.renderEdit("location")}
              </Block>
              <Text
                medium
                secondary
                onPress={() => this.toggleEdit("location")}
              >
                {editing === "location" ? "Save" : "Edit"}
              </Text>
            </Block>
            <Block row space="between" margin={[10, 0]} style={styles.inputRow}>
              <Block>
                <Text gray2 style={{ marginBottom: 10 }}>
                  E-mail
                </Text>
                <Text bold>{profile.email}</Text>
              </Block>
            </Block>
          </Block>

          <Divider margin={[theme.sizes.base, theme.sizes.base * 2]} />
          <Divider />

          <Block style={styles.toggles}>
            <Block
              row
              center
              space="between"
              style={{ marginBottom: theme.sizes.base * 2 }}
            >
              <Text gray2>Notifications</Text>
              <Switch
                value={this.state.notifications}
                onValueChange={value => this.setState({ notifications: value })}
              />
            </Block>
          </Block>
        </ScrollView>
      </Block>
    );
  }
}

Settings.defaultProps = {
  profile: mock.profile
};

export default Settings;

const styles = StyleSheet.create({
  header: {
    paddingHorizontal: theme.sizes.base * 2
  },
  avatar: {
    height: theme.sizes.base * 2.2,
    width: theme.sizes.base * 2.2
  },
  inputs: {
    marginTop: theme.sizes.base * 0.7,
    paddingHorizontal: theme.sizes.base * 2
  },
  inputRow: {
    alignItems: "flex-end"
  },
  sliders: {
    marginTop: theme.sizes.base * 0.7,
    paddingHorizontal: theme.sizes.base * 2
  },
  thumb: {
    width: theme.sizes.base,
    height: theme.sizes.base,
    borderRadius: theme.sizes.base,
    borderColor: "white",
    borderWidth: 3,
    backgroundColor: theme.colors.secondary
  },
  toggles: {
    paddingHorizontal: theme.sizes.base * 2
  }
});

Попытался добавить функция класса, чтобы исправить это, но теперь он не распознал мой профиль на моем const, пытался изменить имя класса на mock и экспортировать как mock, так и профиль, но ничего не помогло?

исправил первую ошибку, но теперь я я получаю вторую ошибку с моим setState

Answer 1

Ошибка довольно информативна.

Вы не можете иметь super (), сидящего вне конструктора класса.

Вот рабочий пример этого:

class YourComponentName extends Component {
  constructor( props ) {
    super( props )

    this.state = {
       user: {}
    }
  }
  ...
}

export default YourComponentName

Дополнительная информация о super: https://overreacted.io/why-do-we-write-super-props/

Хотя это должно устранить полученную ошибку, вероятно, это не решит основную проблему. Я рекомендую исследовать автоматы React.

Answer 2

super(props); следует использовать внутри constructor в классе. Так что просто оберните ваш супер и состояние в конструкторе или удалите супер полностью.