Блог

У меня есть firestore с уроками, см. Рисунок ниже, я получаю из firestore свойство title для каждого объекта и отображаю его в браузере, но каждый раз, когда я обновляю веб-сайт, уроки сортируются по тому, как они хотят, почему это происходит? Я хочу отсортировать их так, как я хочу, я хочу начать с «Введения» и так далее, как я могу это сделать? Я думаю orderBy() , что здесь это не работает.

Как вы видите на изображении выше, порядок в firestore в алфавитном порядке, но на моей странице сортируется по своему усмотрению, см. Рисунок ниже.

Я хочу, чтобы результат был в определенном порядке, например, у нас есть следующие заголовки, эти заголовки из firestore: «Отображение», «Введение», «Выравнивание», моя проблема в том, что эти 3 заголовка находятся в новом порядке каждый раз, когда я обновляю веб-сайт, я хочуони должны быть: «Введение», «Выравнивание», «Отображение». В моем случае у меня больше заголовков, но это то, что происходит, я не знаю, как выровнять их так, как я хочу, или даже по алфавиту, если это возможно.

Ниже приведен код, который я использовал для получения данных из firestore:

 useEffect(() => {
  
    db.collection("users")

      .doc(`${user.uid}`)
      .get()
      .then((doc) => {
        const allData = { ...doc.data(), id: doc.id };
        const intoArray = Object.entries(allData);
        intoArray.sort(); // I used sort here because I had the same problem 
                          // (every time a new order) with the 
                          // data when I converted it to an array

        const getCSSLessons = intoArray[0][1];
        const cssData = Object.values(getCSSLessons);
        setCss(cssData);

        const getHTMLLessons = intoArray[1][1];
        const htmlData = Object.values(getHTMLLessons);
        setHtml(htmlData);

        const getResLessons = intoArray[3][1];
        const resData = Object.values(getResLessons);
        setRes(resData);
      })
      .catch((error) => console.log(error));

  }, [user]);

 

Я пытался использовать sort() , для переменной (htmlData), но она не работает.
Кроме того, я использую map() для их отображения, если это поможет вам ответить на мой вопрос.

Если вы используете sort без каких-либо аргументов, он будет сортировать элементы массива в алфавитном порядке. Похоже, что ваши элементы массива — это массивы, которые приведут к неожиданному поведению. Используйте sort аргумент, чтобы убедиться, что он использует ваши собственные правила сортировки. Например:

 const intoArray = Object
  .entries(allData)
  // I don't know what should be the sorting algorithm
  // As an example, I consider each element (`a` and `b`) to 
  // be arrays and compare both first element as a Number
  .sort( (a, b) => a[0] - b[0])
 

Редактировать

Более безопасный способ поиска элементов в массиве — использовать find :

 const getCSSLessons = intoArray[0]
  .find( element => element.name === 'CSS Lessons');
 

Я делал что-то ненужное, как вы видите на первом рисунке, у меня был основной объект, css и в этом объекте у меня были подобъекты, такие как alignment и в подобъекте, у меня были свойства, которые я хочу отобразить, этот подобъект был ненужным, вместо подобъектов с заранее определенным именем, я позволилfirebase для подсчета вложенных объектов и добавления в качестве имени числа и порядка такой же, как я хотел.

Код, который я использовал для добавления данных в firebase:

 
fire
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((cred) => {
        return db
          .collection("users")
          .doc(cred.user.uid) 
          .set({
            
           css: [
              {
                title: "Introduction",
                path: "/css3/introduction",
              },
              {
                title: "Priority",
                path: "/css3/priority",
              },
          
            ],

           });