需要重新渲染屏幕以在 React-Native 中显示实时数据

Question

我正在使用 componentDidMount 在 React-Native 应用程序中显示 Firebase 实时数据，但是，当我第一次渲染时，没有显示数据。我需要返回并再次导航到页面，以便数据更新并显示在屏幕上。我怎样才能解决这个问题并在第一次尝试时显示数据？谢谢。

export default class ForthPage extends Component {
    constructor() {
        super();
        this.state = {
            reservas: []
        }
    }

    componentDidMount() {
        const readUsersData = () => {
            const nameRef = firebase.database().ref('user0001')
            nameRef.on('value', (snapshot) => {
                const state = snapshot.val();
                this.state.reservas = state; //misstake(see my answer)
            });
        }
        readUsersData()
        const pushAdminData = (data) => {
            this.setState({ data })
        }
        pushAdminData(this.state.reservas);
    }

    render() {
        const reservas = JSON.stringify(this.state.reservas);

        return (
            <Background>
                <View>
                    <ScrollView>
                        <Text> Mis reservas: {reservas}</Text>
                    </ScrollView>
                </View>
            </Background>
        )
    }
}

Answer 1

readUsersData()函数的调用似乎不清楚。尝试在与 render,componentDidMount 相同的级别定义函数。

喜欢下面

constructor() {
    super()
    this.state = {
        reservas: []
    }
}
componentDidMount() {
  const readUsersData = ()=> {
    const nameRef =  firebase.database().ref('user0001')
    nameRef.on('value', (snapshot)=> {
      const state = snapshot.val()
      this.setState({reservas:state}) })
}
readUsersData();
}

这样就可以了。

Answer 2

在功能组件中使用 hooks 从 Firebase 读取实时数据类似于：


    const [reservas, handleReservas] = useState([]);
    const db = () => firebase.database();

    useEffect(() => {
        db();
        console.log('Mounted ');
    });

    useEffect(() => {
        db().ref('/').on('value', handleReservas);
    }, []);

需要重新渲染屏幕以在 React-Native 中显示实时数据

Screen needs to be re-rendered to show Real-Time data in React-Native

mount

render

react-native

firebase-realtime-database