使用 React Hooks 从 Prismic API 获取数据答案

【问题标题】：Fetching data from Prismic API using React Hooks使用 React Hooks 从 Prismic API 获取数据
【发布时间】：2023-03-20 10:44:01
【问题描述】：

我正在尝试从 Prismic 无头 CMS API 查询数据，但在使用 React Hooks 时遇到了问题。棱镜 API 返回 null，尽管我知道它被正确传递，因为我可以在不使用反应钩子的情况下成功查询它。

这是我当前的组件代码。它返回“无法读取 null 的属性 'api'”。它没有到达“数据”控制台日志。

const Footer = ({ prismicCtx }) => {
  const [links, setLinks] = useState([]);

  useEffect(() => {
    const fetchLinks = async () => {
      const data = await prismicCtx.api.query([
        Prismic.Predicates.at('document.tags', [`${config.source}`]),
        Prismic.Predicates.at('document.type', 'footer'),
      ]);
      console.log('data:', data);
      setLinks(data.results[0].data);
    };

    fetchLinks();
  }, []);

  return (
    <div>
      <h1> Footer </h1>
    </div>
  );
};

export default Footer;

【问题讨论】：

标签： javascript reactjs asynchronous react-hooks prismic.io

【解决方案1】：

似乎在初始渲染时 prismicCtx 是 null 并且仅在后续渲染时您会收到更新的值。解决方案显然是调用 prismicCtx 更改的效果，但是如果您只想在初始渲染时调用 api，则需要跟踪是否更早调用了 api，这可以通过使用 @ 来实现987654324@ 并且如果prismicCtx 不存在，您也不需要将状态设置为空

const Footer = ({ prismicCtx }) => {
  const [links, setLinks] = useState([]);
  const isFirstCall = useRef(true);
  useEffect(() => {
   if(prismicCtx && isFirstCall.current) {
    const fetchLinks = async () => {
      const data = await prismicCtx.api.query([
        Prismic.Predicates.at('document.tags', [`${config.source}`]),
        Prismic.Predicates.at('document.type', 'footer'),
      ]);
      console.log('data:', data);
      setLinks(data.results[0].data);
    };
    fetchLinks();
    isFirstCall.current = false;
   }


  },[prismicCtx]);

  return (
    <div>
      <h1> Footer </h1>
    </div>
  );
};

export default Footer;

【讨论】：

【解决方案2】：

想通了，我相信。 PrismicCTX 正在向上更改树，因此它正在切换到未定义。一个简单的 if/else 修复它并使其仅在该道具更改时更新。仍然不确定是否是最佳实践！

const Footer = ({ prismicCtx }) => {
  const [links, setLinks] = useState([]);

  useEffect(
    () => {
      const fetchLinks = async () => {
        const data = await prismicCtx.api.query([
          Prismic.Predicates.at('document.tags', [`${config.source}`]),
          Prismic.Predicates.at('document.type', 'footer'),
        ]);
        console.log('data:', data);
        setLinks(data.results[0].data);
      };
      if (prismicCtx) {
        fetchLinks();
      } else {
        setLinks([]);
      }
    },
    [prismicCtx]
  );

  return (
    <div>
      <h1> Footer </h1>
    </div>
  );
};

export default Footer;

【讨论】：