在反应中从 firebase 发出迭代状态

Question

我在反应中有这个组件，它从 firebase 获取待办事项，构建一个数组并设置一个状态，但是当我渲染该组件时，我第一次只能看到元素，如果我重新加载页面，状态似乎是空的。

import React, { PureComponent } from 'react';
import firebase from 'firebase'

class Charts extends PureComponent {
    constructor(props) {
        super(props);
        this.state = { data: [] };
        this.todoRef = firebase.database().ref('Todo');
    }

    componentDidMount = () => {
        var data = [];
        this.todoRef.on('value', (snapshot) => {
            const todos = snapshot.val();
            for (let id in todos) {
                data.push({ id, ...todos[id] });
            }
        });

        this.setState({ data: data })
    }

    render() {
        return <div>
            {this.state.data.map(item => (
                <p>{item.name}</p>
            ))}
        </div>
    }
}

export default Charts;

如果我使用控制台日志，我会得到一个包含元素的数组 (0)。我试过在不同的 life cicles 方法中定位 setState，但似乎不起作用。

Answer 1

问题

您正在调用 this.setState 外部快照处理程序，因此您只传递空的 ([]) data 数组到状态更新器。

解决方案

您应该将状态更新移动到处理快照的函数中。

componentDidMount = () => {
  const data = [];
  this.todoRef.on('value', (snapshot) => {
    const todos = snapshot.val();
    for (let id in todos) {
      data.push({ id, ...todos[id] });
    }
    this.setState({ data });
  });
}

在反应中从 firebase 发出迭代状态

Issue iterating state from firebase in react

javascript

setstate

reactjs

firebase-realtime-database

问题

解决方案