Question

我的“编辑”页面代码当前遇到一个特定的问题。问题如下：当用户想要在应用程序上编辑其用户名时，如果用户在textInput字段中键入（新）用户名（称为“名称”）并单击按钮（铅笔的图像按钮）），应用程序不会更改用户名。在调试过程中，调试器告诉我 name 未定义。下面是代码片段：

 edit(name) {
let { user } = this.state;
if (user) {
  user.updateProfile({
    displayName: name,   // here i get the error of 'Undefied' 
  }).then(() => {
    // Update successful.0
  }).catch((error) => {
    // An error happened.
  });
}
}

以下遵循页面的完整代码：

     //constructor
  constructor() {
super();
this.state = {
  user: {},
  fetching: true,
}
this.onAuthStateChanged = this.onAuthStateChanged.bind(this);
  }

componentDidMount() {
//Functionality
this.unsubscribeOnAuthChange = firebase.auth().onAuthStateChanged(this.onAuthStateChanged);
}

componentWillUnmount() {
this.unsubscribeOnAuthChange();
}

onAuthStateChanged(user) {
this.setState({ user, fetching: false })
}

edit(name) {
let { user } = this.state;
if (user) {
  user.updateProfile({
    displayName: name,   
  }).then(() => {
    // Update successful.0
  }).catch((error) => {
    // An error happened.
  });
}
}

ok = () => {
this.props.navigation.navigate('Home');
}

//Styles Account
render() {
let { user, fetching } = this.state;
if(fetching) return null;
return (
  <ScrollView>
    <View style={styles.container}>
      <Text style={styles.text}>Account</Text>
      <View style={styles.row}>
        <Image source={require('./Picture/userImage1.png')}  />
        <TouchableOpacity onPress={() => this.edit(user.name)}>
          <Image source={require('./Picture/pencil.png')} style={styles.pencil} />
        </TouchableOpacity>
      </View>
      <Text style={styles.text1}>Welcome {user.displayName}</Text>

      <TextInput
        style={styles.textInput} placeholder='Username'
        onChangeText={(name) => this.setState({name})}
        underlineColorAndroid='transparent'
        autoCapitalize='none'
      />

      <TouchableOpacity
        style={styles.btn}
        onPress={() => this.ok()}>
        <Text style={{ fontSize: 17, color: '#fff' }}>Ok</Text>
      </TouchableOpacity>
    </View>
  </ScrollView>
);
}
}

有人可以给我一些建议，为什么当用户单击图像按钮时出现“未定义”错误？

Answer 1

<TextInput
        style={styles.textInput} placeholder='Username'
        onChangeText={(name) => this.setState({name})} //<---Here you set value in state call `name`
        underlineColorAndroid='transparent'
        autoCapitalize='none'
      />

您在此处传递对象键name的值

<TouchableOpacity onPress={() => this.edit(user.name)}>

只需在this.state中定义name状态，然后在编辑函数中传递状态this.state.name即可。

无法从TextInput获取值

1 个答案: