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

我正在尝试建立一个数据库firebase实时数据库。我可以用console.log（）显示数据，但不能在平面列表中显示。我尝试了不同的方法来解决这个问题。但是，我找不到任何确定的解决办法。 这里是firebase中我的JSON树：

这里是我的代码：

const NotesList=（道具）=>{
const{colors}=useTheme（）；
常量样式=自定义样式（颜色）；
const user=auth（）.currentUser
const[data，setData]=useState（[]）；
const[loading，setLoading]=useState（false）；
常量getData=（）=>{
firebase.database（）.ref（`notes/`）.on（'value'，函数（快照）{
console.log（snapshot.val（））
});
}
useffect（（）=>{
设置超时（（）=>{
setData（getData）；
设置加载（真）；
}, 1000);
}, []);
常量renderItem=（{item}）=>{
返回(
);
};
常量拆分=（）=>{
让icerik=data.map（（item，key）=>item.icerik）；
返回icerik.slice（0，1）+'…'；
};
返回(
{！装货(
) : (
index.toString（）}
/>
)}
props.navigation.navigate（'AddNote'）}>
);
};

---

我尝试了许多不同的方法，但没有任何建议能解决这个问题。如果您能提供帮助，我将非常高兴。

您的

getData

不会返回数据，因为数据是异步加载的。您应该将对

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。

Ciao，基本上您犯了两个错误：

getData

不返回任何内容，因此数据永远不会使用firebase的值进行更新

useffect

有一个奇怪的实现（这是一个无用的调用

setTimeout

您已经在等待来自firebase的数据了） 我的建议是从

useffect

调用

getData

，如下所示：

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

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

然后像这样修改

getData

：

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

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

---

我找到了解决方案，我想和你们分享。 我将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 realtime DB工作时，一个名为Object method的新方法有助于在JSON树中获取子值。

Hi Frank，我尝试了你的建议，但仍然存在相同的问题，当我们这样做时，我得到了一个索引范围错误。正如我所提到的，我可以在控制台中看到数据，但我无法在列表中显示它。我的答案中没有一个代码访问任何具有范围的内容，因此如果您现在得到该错误，它可能来自您已有的代码。事实上，我认为这是一个好迹象，因为这可能意味着您的渲染代码现在正在使用数据库中的数据进行调用，错误来自以前没有调用的代码。嗨，Gio，我尝试了您的建议，但仍然存在相同的问题，当我们这样做时，我遇到了索引范围错误。正如我提到的，我可以在控制台中看到数据，但是我不能在列表中显示它。这与Frank的结果相似。再见，我试着在codesendbox中复制你的便笺列表。它几乎相等（除了NoteSearchBar、NoteCard和data）。如您所见，FlatList具有正确的数据。假设NoteSearchBar和数据不是问题所在，可能NoteCard出现了故障。。。我不知道，你是怎么想的？正如我在回答中所说的，这里你也可以调用

setData

来调用

on（'value'

）的回调。虽然你原来的帖子可能有多个问题，但当你用别人的答案来解决你的问题时，这是很常见的。