Firebase 在我输入时逐字母获取数据（不单击“更新”），而不是整个字符串答案

【问题标题】：Firebase is getting the data letter-by-letter as I'm typing(without clicking the "UPDATE"), instead of a whole stringFirebase 在我输入时逐字母获取数据（不单击“更新”），而不是整个字符串
【发布时间】：2023-03-07 20:44:01
【问题描述】：

您好，我实际上是一名初学者，正在从事我的 React Native 项目，我也在 React Native 中使用 Firebase。我遇到了一个问题，就像我在标题中所说的那样，Firebase 中的实时数据库完全像这样获取“姓名”、“姓氏”和“生日”数据；

Image

当我单击“更新”时，我希望 Firebase 仅将我的数据作为一个完整的字符串作为“名称”获取一次，而不是像“N”那样逐个字母然后“Na”......等等（这种情况适用也适用于“姓名”、“姓氏”和“生日”数据。）。

这是我的代码：

class Profile extends Component {
  onChangeName(profile) {
    this.props.updateProfile(profile);
  }

  onChangeSurname(profile) {
    this.props.updateProfile(profile);
  }

  updateProfile() {
    this.props.updateProfile(this.props.profile);
  }

  render() {
    return (
      <View>
        <Profiletext
          placeholder="Name..."
          onChangeText={this.onChangeName.bind(this)}
        />
        <Profiletext
          placeholder="Surname..."
          onChangeText={this.onChangeSurname.bind(this)}
        />
        <Profiletext
          placeholder="Birthday..."
          onChangeText={this.onChangeSurname.bind(this)}
        />
        <MyButton
          spinner={false}
          title="UPDATE"
          onPress={this.updateProfile.bind(this)}
          color="#E87B79"
        />
      </View>
    );
  }
}

const mapStateToProps = state => {
  const {profile} = state.profileForm;
  return {
    profile,
  };
};

export default connect(
  mapStateToProps,
  {
    changeProfile,
    updateProfile,
  },
)(Profile);

【问题讨论】：

您能否编辑您的问题以显示您当前如何从数据库中加载数据？

标签： javascript firebase react-native firebase-realtime-database

【解决方案1】：

我将假设您的 updateProfile 正在调用数据库来更新数据。然而问题是，每次输入发生变化时，您都在调用 updateProfile，因为输入上有 onChange 函数。

相反，您可以拥有包含姓名、姓氏和生日的状态，并且您可以在 onChange 调用上更新状态。当用户单击按钮时，您可以使用状态更新配置文件，然后调用 updateProfile。

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Name: "",
      SurName: "",
      Birthday: "",
    };
  }

  onFieldChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  updateProfile() {
    // update profile with new Name, Surname, and Birthday
    this.props.profile.name = this.state.Name;
    this.props.profile.surName = this.state.SurName;
    this.props.profile.birthday = this.state.Birthday;
    this.props.updateProfile(this.props.profile);
  }

  render() {
    return (
      <View>
        <Profiletext
          name="Name"
          placeholder="Name..."
          onChangeText={this.onFieldChange.bind(this)}
        />
        <Profiletext
          name="SurName"
          placeholder="Surname..."
          onChangeText={this.onFieldChange.bind(this)}
        />
        <Profiletext
          name="Birthday"
          placeholder="Birthday..."
          onChangeText={this.onFieldChange.bind(this)}
        />
        <MyButton
          spinner={false}
          title="UPDATE"
          onPress={this.updateProfile.bind(this)}
          color="#E87B79"
        />
      </View>
    );
  }
}

【讨论】：