如何在 React 中渲染数据（实时/firebase）

Question

我有这个使用 Vue 创建的数据库（实时/firebase），现在我想使用 React 检索数据。我可以在控制台中看到数据，但我无法渲染所有项目，只能渲染最后一个。这是我尝试过的：

 const fetchDatabase = () => {
    db.on("value", snapshot => {
      snapshot.forEach(item => {
        let data = item.val();
        console.log(data);
        setSusi(data);
      });
    });
  };

我正在尝试像这样渲染它：

<ul>
        {Object.entries(susi).map(([key, value]) => {
          return (
            <li>
              {key}: {value}
            </li>
          );
        })}
        <hr />
      </ul>
      <button onClick={fetchDatabase}>pegar anamnese</button>

Answer 1

这里的问题是你只将last项设置为状态：

const fetchDatabase = () => {
    db.on("value", snapshot => {
      snapshot.forEach(item => {
        let data = item.val();
        console.log(data);
        setSusi(data);
      });
    });
  };

试试这样的：

const fetchDatabase = () => {
  const susis = [];
  db.on("value", (snapshot) => {
    snapshot.forEach((item) => {
      let data = item.val();
      console.log(data);
      susis.push(data);
    });

    // here we set all of them
    setSusi(susis);
  });
};