如何将 Firebase 对象置于响应状态？答案

【问题标题】：How put Firebase object to state in react?如何将 Firebase 对象置于响应状态？
【发布时间】：2021-08-31 19:41:43
【问题描述】：

我正在学习 React，但我很难将 Firebase 中的数据放入应用程序状态。我使用 Rebase，但我愿意接受任何解决方案！

仍然有一个类似于这个的错误：

感谢您的帮助！

代码如下：

class App extends Component {
  state = {
    user:'',
    vampires: {}
  }

  componentDidMount() {

    if(this.state.user === ''){
      firebase.auth().onAuthStateChanged(user =>  {
        if(user){
            this.handleUserLogin({ user })
            this.setVampires({ user })
        } else {
          console.log('error')
        }
      })
    }
  }

  setVampires = async (authData) => {
    console.log(this.state.user)
    await base.fetch(`/${authData.user.uid}/vampires`, { context: this })
    .then(data => {
      console.log(data)
      let vampires = this.state.vampires;
      vampires = {..._.cloneDeep(data)};
      this.setState({vampires: {vampires}})
    })
  }

  handleUserLogin = async authData => {
    this.setState({user: authData.user.uid})
  }

【问题讨论】：

标签： javascript reactjs firebase-realtime-database firebase-authentication rebase

【解决方案1】：

您的 Firebase 数据以对象的形式返回，其属性为 VampM5-....。 React 期望您将任何重复的数据作为数组而不是对象传递。

因此，您需要将 Firebase 中的数据转换为数组，例如：

await base.fetch(`/${authData.user.uid}/vampires`, { context: this })
.then(data => {
  vampires = [];
  data.forEach((child) => {
    vampires.push({ ...child.val(), ".key": child.key });
  })
  this.setState({ vampires: vampires })
})

【讨论】：

它不起作用，它会采用递归复制孩子的方法。最后我简化了我的阶段，我的对象不再有几个孩子
很高兴听到您找到了另一种使其工作的方法@JamiNejem。如果您可以将该解决方案的代码和解释发布为自我回答，那就太好了，这样其他人也可以从中受益。