Question

我正在尝试将Firestore输入到表单中并将所有用户数据放入，以便我可以通过

传递信息

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上识别出我的个人资料，试图将类名称更改为模拟并导出模拟和个人资料，但没有任何提示？

修复了第一个错误，但是现在我的setState出现了第二个错误

Answer 1

super(props);应该在课程的constructor内部使用。因此，只需将您的super和state包装在构造函数中，或完全删除super。

Answer 2

该错误非常有用。

您不能让super（）坐在类构造函数的外部。

这将是一个可行的示例：

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

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

export default YourComponentName

有关超级的更多信息：https://overreacted.io/why-do-we-write-super-props/

这应该可以解决您遇到的错误，但可能无法解决您的根本问题。我建议研究React状态机。

我在这里的代码有什么错，我很迷茫

2 个答案: