React 不会从 firebase 返回一个以上的文档

Question

我不熟悉将 React 与 Firebase 结合使用，我正在努力返回我在 Firebase 中拥有的数据。我有一个名为“用户”的集合，里面有多个文档，里面有自动生成的 ID。我在每个文档中也有 3 个字段，全名、电子邮件和 ID。这是我用来获取文档的代码：

function App() {

  const db = firebase.firestore();
  const [users, setUsers] = useState([])
  const fetchUsers = async () => {
    const response = db.collection('users');
    const data = await response.get();
    data.docs.forEach(item => {
      setUsers([...users, item.data()])
    })
  }

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

  return (
    <div>
      {
        users && users.map(user => {
          return (
            <div key={user.id}>
              <div>
                <h4>{user.fullname}</h4>
                <p>{user.email}</p>
              </div>
            </div>
          )
        })
      }
    </div>
  );
}

在控制台中，它返回单个数组中的所有文档，但在网页上，它只返回最后一个文档。有没有办法退回所有文件？任何帮助将不胜感激，谢谢。

Answer 1

在您的 fetchUsers 函数中，您需要传入具有先前状态的函数。

const fetchUsers = async () => {
const response = db.collection('users');
    const data = await response.get();
    data.docs.forEach(item => {
      setUsers((prevState)=>{return ({[...prevState, item.data()]})})
    })
  }