javascript - 组件内部函数中的状态数组为空

Question

我想在函数toDos内部使用变量onTodosRemoved。我期待它有一个从 归档的值onceTodos，但结果数组是空的。我在这里犯错了吗？

import * as React from 'react';
import { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import FloatingActionButton from '../components/FloatingActionButton';
import { View } from '../components/Themed';
import TODOList from '../components/TODOList';
import Firebase from 'firebase';
import { ToDoSingleData } from '../components/TODOSingle';

const styles = StyleSheet.create({
  modalContainerStyle: {
    flex: 1,
  },
});

export default () => {
  const [toDos, setToDos] = useState<Array<ToDoSingleData>>([]);

  // const onToDosChange = (toDoSnapshot: Firebase.database.DataSnapshot) => {
  //   const toDosTemp: Array<ToDoSingleData> = [...toDos];
  //   toDosTemp.push({
  //     id: toDoSnapshot.key,
  //     ...toDoSnapshot.val(),
  //   });
  //   setToDos(toDosTemp);
  // };
  const onTodosRemoved = (toDoSnapshot: Firebase.database.DataSnapshot) => {
    console.log(toDos);
    console.log(toDoSnapshot.val());
  };
  const onceToDos = (todosSnapshot: Firebase.database.DataSnapshot) => {
    const toDosTemp: Array<ToDoSingleData> = [];
    todosSnapshot.forEach((toDoSnapshot) => {
      toDosTemp.push({
        id: toDoSnapshot.key,
        ...toDoSnapshot.val(),
      });
    });
    setToDos(toDosTemp);
    console.log("After");
    console.log(toDos);
  };

  useEffect(() => {
    const user = Firebase.auth().currentUser;

    if (user !== null) {
      const userToDos = Firebase.database()
        .ref(`users/${user.uid}/todos`);
      userToDos
        .once('value', onceToDos);
      // userToDos
      //   .on('child_added', onToDosChange);
      userToDos
        .on('child_removed', onTodosRemoved);
    }
  }, []);

  return (
    <View style={styles.modalContainerStyle}>
      <TODOList
        data={toDos}
      />
      <FloatingActionButton onPress={() => navigation.navigate('CreateTODO')}/>
    </View>
  );
};

标签： javascriptreactjsfirebasereact-native