TypeError：未定义不是对象（评估“ this.state.user”）

Question

作为学校项目的一部分，我正在慢慢学习ReactNative

在解决了之前的问题后，我遇到了另一个问题。设置页面上的所有this.state最初都是this.setState，我更改了它，因为我认为这是导致我出现问题的原因，但问题仍然存在

任何帮助都是很棒的，我再次感谢我迄今为止从该社区获得的所有帮助

模拟屏幕

import Fire from '../utilities/Fire';
import React from "react";

class mock extends React.Component {
constructor(props) {
  super(props);
    this.state = {
       user: {},
    }

  }
    componentDidMount() {
      const user = this.props.uid || Fire.shared.uid

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

  componentWillUnmount() {
      this.unsubscribe();

  }

  unsubscribe = null;

};  


  const profile = {
    name: 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, mock};

设置屏幕

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 {
  constructor(props) {
    super(props);
    this.state = {
      notifications: true,
      editing: null,
      user: {}
    };
  }
  componentDidMount() {
    const user = this.props.uid || Fire.shared.uid

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

componentWillUnmount() {
    this.unsubscribe();

}

unsubscribe = null;


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

    this.state({ user });
  }

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

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

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

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

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

    return (
      <Block>
        <Block flex={false} row center space="between" style={styles.header}>
          <Text h1 bold>
            Settings
          </Text>
          <Button>
            <Image source={user.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 }}>
                  Name
                </Text>
                {this.renderEdit("name")}
              </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>{user.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.state({ notifications: value })}
              />
            </Block>
          </Block>
        </ScrollView>
      </Block>
    );
  }
}

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

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