Javascript 使用React钩子从prismicapi获取数据

我试图从Prismic headless CMS API查询数据，但在使用React钩子时遇到了问题。prismic API返回null，尽管我知道它被正确地传递，因为我可以在不使用react钩子的情况下成功地查询它

这是我目前的代码。其返回“无法读取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;

constfooter=（{prismicCtx}）=>{
const[links，setLinks]=useState（[]）；
useffect（（）=>{
const fetchLinks=async（）=>{
const data=wait prismicCtx.api.query([
Prismic.Predicates.at（'document.tags'，[`${config.source}`]），
Prismic.Predicates.at（'document.type'，'footer'），
]);
console.log（'数据：'，数据）；
setLinks（data.results[0].data）；
};
fetchLinks（）；
}, []);
返回(
页脚
);
};
导出默认页脚；

我相信我已经解决了。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;

constfooter=（{prismicCtx}）=>{
const[links，setLinks]=useState（[]）；
使用效果(
() => {
const fetchLinks=async（）=>{
const data=wait prismicCtx.api.query([
Prismic.Predicates.at（'document.tags'，[`${config.source}`]），
Prismic.Predicates.at（'document.type'，'footer'），
]);
console.log（'数据：'，数据）；
setLinks（data.results[0].data）；
};
if（prismicCtx）{
fetchLinks（）；
}否则{
setLinks（[]）；
}
},
[prismicCtx]
);
返回(
页脚
);
};
导出默认页脚；

在这种情况下，在初始渲染时，

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;

constfooter=（{prismicCtx}）=>{
const[links，setLinks]=useState（[]）；
const isFirstCall=useRef（true）；
useffect（（）=>{
if（prismicCtx&&isFirstCall.current）{
const fetchLinks=async（）=>{
const data=wait prismicCtx.api.query([
Prismic.Predicates.at（'document.tags'，[`${config.source}`]），
Prismic.Predicates.at（'document.type'，'footer'），
]);
console.log（'数据：'，数据）；
setLinks（data.results[0].data）；
};
fetchLinks（）；
isFirstCall.current=false；
}
}，[prismicCtx]）；
返回(
页脚
);
};
导出默认页脚；