如何将 Firebase 对象置于反应状态？

Question

我正在学习 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})
  }

Answer 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 })
})