Javascript 使用reactjs将编辑的数据保存到firebase

Javascript 使用reactjs将编辑的数据保存到firebase,javascript,reactjs,firebase,reactfire,Javascript,Reactjs,Firebase,Reactfire,我正在创建一个应用程序,其中用户数据在前端使用reactjs注册,在后端使用firebase注册。我可以将数据保存到firebase。我可以编辑和删除数据,但无法将编辑后的数据保存到firebase。我应该如何编辑数据?我使用了child_,但仍然不起作用 export default class App extends React.Component { constructor(props) { super(props); this.state = {

我正在创建一个应用程序,其中用户数据在前端使用reactjs注册,在后端使用firebase注册。我可以将数据保存到firebase。我可以编辑和删除数据,但无法将编辑后的数据保存到firebase。我应该如何编辑数据?我使用了child_,但仍然不起作用

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
        userInfo:userInfo
      }
    this.userRef = new Firebase('https://***.firebaseio.com/users/');
    this.createUser = this.createUser.bind(this);
    this.saveUser = this.saveUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);

  }

  loadData(){
    this.userRef.on('value', snap => {
      let userInfo = [];
      snap.forEach( data => {
        let userData = data.val();
        userData.id = data.name();
        userInfo.push(userData);
      });
      this.setState({ userInfo });
    });

    this.userRef.on('child_removed', (dataSnapshot) =>{
        delete this.state.userInfo[dataSnapshot.key()];
        this.setState({ userInfo: this.state.userInfo });
    });

  }

  componentDidMount(){
    this.loadData();
  }

  createUser(user){
    this.userRef.push(user);
  }

  saveUser(oldUser, newUser){
    console.log('olduser',oldUser);
    console.log('newuser', newUser);
    // TODO - optimize this code
    const foundUser = _.find( this.state.userInfo, user =>
        user.name === oldUser.name
    );
    const foundContact = _.find( this.state.userInfo, user =>
        user.contact === oldUser.contact
    );
    const foundAddress = _.find( this.state.userInfo, user =>
        user.address === oldUser.address
    );
    const foundEmail = _.find( this.state.userInfo, user =>
        user.email === oldUser.email
    );
    const foundUsername = _.find( this.state.userInfo, user =>
        user.username === oldUser.username
    );
    const foundPassword = _.find( this.state.userInfo, user =>
        user.password === oldUser.password
    );
    console.log('foundUser', foundUser);
    console.log('foundUser.name',foundUser.name);
    foundUser.name = newUser.name;
    foundContact.contact = newUser.contact;
    foundAddress.address = newUser.address;
    foundEmail.email = newUser.email;
    foundUsername.username = newUser.username;
    foundPassword.password = newUser.password;
  }
根据文件: var ref=新火基

根据文件: var ref=新火基


您可以在loadData函数中保存id时获取该id。所以你可以这样做

saveUser(oldUser, newUser){
    console.log('olduser',oldUser);
    console.log('newuser', newUser);
    // TODO - optimize this code
    const foundUser = _.find( this.state.userInfo, user =>
        user.name === oldUser.name
    );
    const foundContact = _.find( this.state.userInfo, user =>
        user.contact === oldUser.contact
    );
    const foundAddress = _.find( this.state.userInfo, user =>
        user.address === oldUser.address
    );
    const foundEmail = _.find( this.state.userInfo, user =>
        user.email === oldUser.email
    );
    const foundUsername = _.find( this.state.userInfo, user =>
        user.username === oldUser.username
    );
    const foundPassword = _.find( this.state.userInfo, user =>
        user.password === oldUser.password
    );
    console.log('foundUser', foundUser);
    console.log('foundUser.name',foundUser.name);
    foundUser.name = newUser.name;
    foundContact.contact = newUser.contact;
    foundAddress.address = newUser.address;
    foundEmail.email = newUser.email;
    foundUsername.username = newUser.username;
    foundPassword.password = newUser.password;
  }
const editUserRef = new Firebase('https://***.firebaseio.com/users').child(oldUser.id);
console.log('edit',editUserRef);
editUserRef.update(foundUser);

您可以在loadData函数中保存id时获取该id。所以你可以这样做

saveUser(oldUser, newUser){
    console.log('olduser',oldUser);
    console.log('newuser', newUser);
    // TODO - optimize this code
    const foundUser = _.find( this.state.userInfo, user =>
        user.name === oldUser.name
    );
    const foundContact = _.find( this.state.userInfo, user =>
        user.contact === oldUser.contact
    );
    const foundAddress = _.find( this.state.userInfo, user =>
        user.address === oldUser.address
    );
    const foundEmail = _.find( this.state.userInfo, user =>
        user.email === oldUser.email
    );
    const foundUsername = _.find( this.state.userInfo, user =>
        user.username === oldUser.username
    );
    const foundPassword = _.find( this.state.userInfo, user =>
        user.password === oldUser.password
    );
    console.log('foundUser', foundUser);
    console.log('foundUser.name',foundUser.name);
    foundUser.name = newUser.name;
    foundContact.contact = newUser.contact;
    foundAddress.address = newUser.address;
    foundEmail.email = newUser.email;
    foundUsername.username = newUser.username;
    foundPassword.password = newUser.password;
  }
const editUserRef = new Firebase('https://***.firebaseio.com/users').child(oldUser.id);
console.log('edit',editUserRef);
editUserRef.update(foundUser);