来自对象 TypeError 的反应显示数据：值映射不是函数答案

【问题标题】：React display data from object TypeError: value map is not a function来自对象 TypeError 的反应显示数据：值映射不是函数
【发布时间】：2021-03-17 22:54:47
【问题描述】：

在尝试从值对象呈现数据时出现“TypeError：值未定义”错误，当我控制台日志值对象确实显示时。

代码

import React from "react";
import { useParams } from "react-router-dom";
import {
  useDocumentData,
} from "react-firebase-hooks/firestore";
import firebase from "../firebase";

const firestore = firebase.firestore();

const Threads = () => {
  const { threadId } = useParams();
  const [value, loading, error] = useDocumentData(firestore.collection("threads").doc(threadId));
  console.log(value);
  return (
    <div>
      {value.map((thread, i) => (
        <div>
          <h1>{thread.title}</h1>
          <p>{thread.desc}</p>
        </div>
      ))}
    </div>
  );
};

export default Threads;

控制台

错误

【问题讨论】：

我认为，这是因为你的价值是一个对象，而不是一个数组。您无法映射对象。或者，你可以试试这个[value].map((thread, i) => { }
随着这个改变，错误变成了这个 TypeError: thread is undefined
您可以确定您的值的类型是数组还是对象。你可以看看结果。如果它不是一个数组，那么你不能映射它。可以使用Array.isArray(value)查看
这返回了false，有什么办法可以从这个对象中获取数据来显示它？

标签： node.js reactjs object google-cloud-firestore

【解决方案1】：

变量值是一个对象。 JS 中的 map 函数只适用于数组。所以试试这个。

        <div>
          <h1>{value.title}</h1>
          <p>{value.desc}</p>
        </div>

【讨论】：

我收到错误提示 TypeError: value is undefined