next.js TypeError：task.dueDate.toDate不是函数

9rygscc1 于 2023-05-06 发布在其他

关注(0)|答案(1)|浏览(107)

我使用Firebase作为我的数据库和nextjs。我想从firebase读取数据。当我试图读取到期日，这是一个时间戳数据类型，我面临这个错误。下面是我如何从Firebase代码中读取数据：

const dbInstance = collection(firestore, "tasks");
useEffect(() => {
  getTasks();
}, []);

const getTasks = () => {
  getDocs(dbInstance).then((data) => {
    setTasksArray(
      data.docs.map((item) => {
        return { ...item.data() };
      })
    );
  });
};

在return语句中，当我试图Map所有任务时，一切都很顺利，除了date.so我在谷歌上搜索解决方案并看到toDate（）函数。我使用了task.duedate.toDate()，出现了错误
我能做的最好的就是：

{tasksArray.map((task) => {
  return (
    <Flex
      flexDir={"column"}
      key={task.creatorId}
      hidden={task.priority != "" ? true : false}
    >
      <Text>{task.taskName}</Text>
      <Text fontSize="xs">
        {safeJsonStringify(task.dueDate)}
      </Text>
    </Flex>
  );
})}

它返回了以下内容：{“秒”：1683300279，“纳秒”：338000000}
但我打算以一种温和的方式显示它，就像在stackoverflow中一样

next.js

来源：https://stackoverflow.com/questions/76184513/typeerror-task-duedate-todate-is-not-a-function

1条答案

按热度按时间

sg3maiej1#

假设

基于最新的输出，我假设dueDate字段是一个JS对象，而不是Firebase Timestamp的示例，其格式类似于：

{
  seconds: 1683300279, 
  nanoseconds:338000000
}

然后，如果它是一个Object，则没有内置方法.toDate。鉴于上述假设，这里有两个解决方案：

1.在Object外创建Firebase时间戳

const timestamp = new firebase.firestore.Timestamp(dueDate.seconds, dueDate.nanoseconds)

这将示例化一个可以访问.toDate方法的实际Timestamp。

2.使用时间算法将JS对象转换为Date

JavaScript在new Date()构造函数上接受毫秒。
然后，您可以将对象数据转换为毫秒，然后通过执行以下操作构建JS Date：

const NS_TO_MS_MULTIPLIER = 1/1000000
const SEC_TO_MS_MULTIPLIER = 1000

const timestampInMilliseconds = dueDate.seconds * SEC_TO_MS_MULTIPLIER + dueDate.nanoseconds + NS_TO_MS_MULTIPLIER

// Date takes the amount in milliseconds and build a Date object
const date = new Date(timestampInMilliseconds)

我已经在CodeSandbox上举例说明了这两种方法：https://codesandbox.io/s/infallible-khayyam-68iw0p?file=/src/App.js

赞(0）回复(0）举报 2023-05-06

我来回答

next.js TypeError：task.dueDate.toDate不是函数

1条答案

假设

1.在Object外创建Firebase时间戳

2.使用时间算法将JS对象转换为Date

相关问题

热门标签

最新问答