反应来自 object TypeError 的显示数据：值 map 不是 function

Question

Getting "TypeError: value is undefined" error when trying to render the data from the value object, when I console log value the object does show.

CODE

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;

CONSOLE

ERROR

Answer 1

The variable value is a object. Map function in JS is applicable only for arrays. So try this.

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