Как очистить данные об обещаниях в реагирующем хуке? - PullRequest
Новая
       0

Как очистить данные об обещаниях в реагирующем хуке?

1 голос
/ 27 марта 2020 
// Home.js
import React, { useState, useEffect } from "react";
import Todo from "../components/Todo";
import { firestore } from "../database/firebase";

export default function Home() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    firestore
      .collection("todos")
      .get()
      .then(snapshot => {
        setTodos(
          snapshot.docs.map(doc => {
            return { id: doc.id, ...doc.data() };
          })
        );
      });
  }, []);

  return (
    <>
      {todos.map(todo => (
        <Todo
          key={todo.id}
          id={todo.id}
          title={todo.title}
        ></Todo>
      ))}
    </>
  );
}

У меня было это простое приложение todo, в котором я обновляю состояние задач при получении данных из firestore.

Выше useEffect установите мои задачи как [{id: "123", title: "work "}, ...].

Но я хочу объединить все методы получения в firestore в один файл и просто вызвать 

useEffect(() => {
  getTodos().then(data=>setTodos(data))
})

Тогда как мне определить функцию getTodos? Я попробовал приведенный ниже код и со многими вариантами, такими как добавление asyn c и ожидание, но ни один из них не сработал. 

// firestore.js
export const getTodos = () => {
  return firestore
    .collection("todos")
    .get()
    .then(snapshot => {
      snapshot.docs.map(doc => {
        return { id: doc.id, ...doc.data() };
      });
    });
};

Ответы [ 2 ]

2 голосов
/ 27 марта 2020

Еще одно решение без асинхронности / ожидания. 

// firestore.js
export const getTodos = () => (
  firestore
    .collection("todos")
    .get()
    .then((snapshot) => (
      snapshot.docs.map((({ id, data }) => (
        { id, ...data() }
      ))
    ))
);
2 голосов
/ 27 марта 2020

Использование синтаксиса async / await позволит вам навести порядок и получить желаемый результат. Вам нужно немного изменить положение вещей. Попробуйте что-то вроде этого: 

export const getTodos = async function() {

   const data = await firestore.collection("todos").get();
   const dataArr = data.docs.map(doc => {
    return { id: doc.id, ...doc.data() };
  });

  return dataArr;
};
...