如何使用 React Native 从 firebase 实时数据库获取数据？

Question

我正在尝试获取数据 Firebase 实时数据库。我可以使用 console.log() 显示数据，但无法在平面列表中显示。我尝试了不同的方法来解决这个问题。但是，我找不到任何确定的解决方案。在这里，我在 firebase 中的 JSON 树：

在这里，我的代码：

const NotesList = (props) => {

  const { colors } = useTheme();
  const styles = customStyles(colors);

  const user = auth().currentUser
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const getData = () => {
    firebase.database().ref(`notes/`).on('value', function (snapshot) {
        console.log(snapshot.val())
    });
  }

  useEffect(() => {
    setTimeout(() => {
      setData(getData);
      setLoading(true);
    }, 1000);
  }, []);
  
  const renderItem = ({ item }) => {
    return (
      <View style={{ marginRight: 10, marginLeft: 10 }}>
        <TouchableOpacity>
          <NoteCard title={item.noteTitle} icerik={item.noteDetails} date={item.timestamp} />
        </TouchableOpacity>
      </View>
    );
  };
  const split = () => {
    let icerik = data.map((item, key) => item.icerik);
    return icerik.slice(0, 1) + '...';
  };
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      
      <NoteSearchBar />
      {!loading ? (
        <View style={{ alignItems: 'center' }}>
          <ActivityIndicator color="#ff5227" />
        </View>
      ) : (
          <FlatList
            data={data}
            numColumns={2}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      <TouchableOpacity
        style={styles.addButton}
        onPress={() => props.navigation.navigate('AddNote')}>
        <Plus width={40} height={40} fill="white" margin={10} />
      </TouchableOpacity>
    </View>
  );
};

我尝试了很多不同的方法，但没有任何建议可以解决问题。如果你能帮上忙，我会很高兴。

Answer 1

您的 getData 没有 return 数据，因为数据是异步加载的。您应该改为将他对 setData 的调用移至您的 getData:

  const getData = () => {
    firebase.database().ref(`notes/`).on('value', function (snapshot) {
      setData(snapshot.val());
    });
  }

  useEffect(() => {
    setTimeout(() => {
      getData()
      setLoading(true);
    }, 1000);
  }, []);

现在调用 setData 会将 JSON 置于状态，这反过来会强制 React 使用新数据重新绘制 UI。

Answer 2

再见，基本上你犯了2个错误：

getData 没有 return 任何东西，所以数据永远不会用来自 firebase 的值更新；
useEffect 有一个奇怪的实现（这是无用的调用 setTimeout 你已经在等待来自 firebase 的数据）；

我的建议是像这样从 useEffect 调用 getData：

   useEffect(() => {
      getData()
   }, []);

并像这样修改getData：

    const getData = () => {
       firebase.database().ref(`notes/`).on('value', function (snapshot) {
          setData(snapshot.val());
          setLoading(true);
       });
    }

Answer 3

我找到了解决方案，我想与大家分享。我将 firebase 中的数据保留为一个新值，然后将其放入 setData 中。这样，我就可以在平面列表中显示数据了。

 const getData = () => {
firebase.database().ref(`notes/`).on('value', snapshot => {
    let responselist = Object.values(snapshot.val())
    setData(responselist)
    console.log(snapshot.val())
    setLoading(true);
});
}

useEffect(() => {
  getData();
}, []);

此外，在 firebase 实时数据库运行时，一种称为对象方法的新方法在获取 JSON 树中的子值时有所帮助。

如何使用 React Native 从 firebase 实时数据库获取数据？

How do I get data from firebase realtime databese with React Native?

javascript

firebase

react-native

firebase-realtime-database

react-native-firebase