Question

我试图在 React Native 中使用 useState 来存储和显示数据，但数组显示为空：这是我要存储的数据：

Array [
  Object {
    "text": "Dhananjay",
    "time": 1610528730258,
  },
  Object {
    "text": "Abhey",
    "time": 1610529549681,
  },
  Object {
    "text": "Himanshu",
    "time": 1610529566017,
  },
]

下面是我的代码：

const [list, setList] = useState([]);

useEffect(() => {
        const items = firebase.database().ref("userName");
        items.on("value", datasnap => {
          //console.log(Object.values(datasnap.val()));
          console.log(list);
          setList([...list, {
              id: Object.values(datasnap.val())
            }
          ]);
          console.log(list);
        })
        console.log(list);
    }, []);

Answer 1

首先，本实例中的 useEffect 会随时触发您的函数：

功能组件挂载，以及
数组中指定的依赖项之一在后续重新渲染之间发生了变化

由于您尚未指定任何依赖项，因此检查这是否有效的最佳方法是在组件内呈现列表的内容并观察列表是否已更改。

还值得注意的是 useState 是异步的，您可以考虑使用：

useEffect(() => { console.log(list)}, [list])

或者，您也可以尝试使用以下方法渲染内容（尽管您已经在上面介绍了基础内容）：

return (
   <div>
      {JSON.stringify(list)}
   </div>
)

并查看文本是否出现在组件中。如果没有机会，on 回调不会在这里触发。

如何在本机反应中使用状态？

1 个答案: