使用React Hooks从Prismic API获取数据

Question

我正在尝试查询来自Prismic无头CMS API的数据并使用React Hooks遇到问题。 prismic API返回null，虽然我知道它正确传递，因为我可以成功查询它而不使用react钩子。

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

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;

Answer 1

这似乎是在初始渲染prismicCtx是null并且仅在随后的渲染中您收到更新值的情况。解决方案显然是调用prismicCtx的变化效果，但是如果你只是想在初始渲染时调用api，你需要跟踪你是否更早地调用了api，你可以通过使用useRef来实现如果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;

Answer 2

想出来，我相信。 PrismicCTX正在改变树木，因此它正在转向未完成。一个简单的if / else修复它并使它只更新那个prop更改。仍不确定是否是最好的做法！

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;