我正在尝试将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出现了第二个错误
答案 0 :(得分:0)
super(props);
应该在课程的constructor
内部使用。因此,只需将您的super和state包装在构造函数中,或完全删除super。
答案 1 :(得分:0)
该错误非常有用。
您不能让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状态机。