Question

我在Firestore上有2个集合，boxes包含一个字段shoes，它是对shoes collections的引用ID的数组：

“我的盒子”组件正在获取所有盒子并显示其编号。我还想在其中显示鞋子的属性，例如照片。所以我就这样：

Boxes.jsx

// DEPENDENCIES
import React, { useEffect, useContext } from 'react';

// COMPONENTS
import BoxCard from '../Components/BoxCard';

// CONTEXT
import ShoesContext from '../Contexts/ShoesContext';

// HELPERS
import db from '../config/firebase';

let initialBoxes = [];

const Boxes = () => {
  const { boxes, setBoxes } = useContext(ShoesContext);
  useEffect(() => {
    initialBoxes = [];
    db.collection('boxes')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          initialBoxes.push(doc);
        });
        setBoxes(initialBoxes);
      });
  }, []);
  return (
    <div>
      <h3>You have {boxes.length} boxes:</h3>
      {!boxes ? (
        <div>Loading..</div>
      ) : (
        boxes.map(box => {
          return <BoxCard box={box} key={box.id} />;
        })
      )}
    </div>
  );
};

export default Boxes;

Boxes.jsx

import React from 'react';
import TestComponent from './TestComponent';

const BoxCard = ({ box }) => {
  const theBox = box.data();

  return (
    <div>
      <h5>
        Box number {theBox.number} has {theBox.shoes.length} shoes:{' '}
      </h5>
      {theBox.shoes.map(shoe => {
        return <TestComponent shoe={shoe} />;
      })}
    </div>
  );
};

export default BoxCard;

这就是一切的破灭：

import React from 'react';

const TestComponent = ({ shoe }) => {
  useEffect(() => {
    let hell;
    shoe.get().then(doc => {
      hell = doc.data();
    });
  }, []);
  return <div>{hell ? hell.season : 'loading...'}</div>;
};

export default TestComponent;

hell未定义。我还没有找到渲染嵌套文档的方法，因此可以在TestComponent组件中使用它们。到目前为止，我在网上的广泛研究尚未成功，因此今天是我的问题。

谢谢！

更新：

我似乎找到了答案，下面乔什的回答使我走上了正确的轨道。请参见以下TestComponent.jsx代码：

import React, { useEffect, useState } from 'react';

// HELPERS
import db from '../config/firebase';

const TestComponent = ({ shoe }) => {
  
  const [hell, setHell] = useState();

  useEffect(() => {
    db.collection('shoes')
      .doc(shoe.id)
      .get()
      .then(doc => {
        setHell(doc.data());
      });
  }, []);

  return <div>{hell ? hell.season : 'loading...'}</div>;
};

export default TestComponent;

Answer 1

TestComponent中shoe中的shoe.get()...是什么？不应该是db.doc(shoe).get()...。

从数组字段中的文档ID获取Firestore文档并在React中显示

1 个答案: