按日期反應firebase資料庫順序

我正在使用實時資料庫react制作待辦事項串列應用程式。firebase

我想按日期訂購待辦事項。

我的資料庫：

如果我不能從 firebase 做到這一點，有沒有辦法從客戶端訂購它（反應）？

我的代碼

Todos.js：

import { useState, useEffect } from "react";
import { signOut, onAuthStateChanged } from "firebase/auth";
import { uid } from "uid";
import { set, ref, onValue } from "firebase/database";
import { auth, db } from "../firebase";
import moment from "moment";

function Todos() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");
  const navigate = useNavigate();

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        onValue(ref(db, `/${auth.currentUser.uid}`), (snapshot) => {
          setTodos([]);
          const data = snapshot.val();
          if (data !== null) {
            Object.values(data).map((todo) => {
              setTodos((currentTodos) => [todo, ...currentTodos]);
            });
          }
        });
      } else {
        navigate("/");
      }
    });
  }, []);

  const handleSignOut = () => {
    signOut(auth)
      .then(() => navigate("/"))
      .catch((error) => alert(error.message));
  };

  const addTodo = () => {
    const uidd = uid();
    set(ref(db, `${auth.currentUser.uid}/${uidd}`), {
      task: newTodo,
      uid: uidd,
      createdAt: moment().format("YYYY-MM-DD k:m:s"),
    });

    setNewTodo("");
  };

  return (
    <>
      <Center>
        <Button colorScheme="red" marginTop={5} onClick={handleSignOut}>
          Logout
        </Button>
      </Center>
      <Container
        maxW="4xl"
        marginTop={8}
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Box
          boxShadow="base"
          rounded="lg"
          padding={10}
          background="white"
          width="100%"
        >
          <Heading as="h1" size="md" textAlign="center">
            Todo List App
          </Heading>
          <form onSubmit={(e) => e.preventDefault()}>
            <Box
              display="flex"
              alignItems="center"
              justifyContent="space-between"
              marginTop={5}
            >
              <Input
                placeholder="New Task"
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
                size="lg"
                width="80%"
              />
              <Button
                colorScheme="teal"
                height={45}
                rightIcon={<MdAdd />}
                margin={0}
                onClick={addTodo}
                type="submit"
              >
                Add
              </Button>
            </Box>
          </form>
          {todos.map((todo, index) => {
            return <Todo key={index} task={todo.task} uid={todo.uid} />;
          })}
        </Box>
      </Container>
    </>
  );
}

export default Todos;

提前致謝。

uj5u.com熱心網友回復：

由于您正在為單個用戶加載 TODO，因此您確實可以按其createdAt屬性對它們進行排序。為此，請使用有關排序和過濾資料的檔案中所示的查詢：

const ref = ref(db, `/${auth.currentUser.uid}`);
const query = query(ref, orderByChild('createdAt'));
onValue(query, (snapshot) => {
  ...

在代碼中，您需要確保snapshot.forEach按順序回圈遍歷子項，因為.val()在此之前呼叫將回傳一個 JSON 物件，并且根據定義，JSON 物件中的屬性沒有排序：

snapshot.forEach((child) => {
  console.log(child.key, child.val());
});

標籤：javascript 反应 火力基地 firebase-实时数据库

上一篇：安全規則：FirebaseError：權限缺失或不足

下一篇：使用React從Firestore中提取資料