Извлечение данных из Prismic API с использованием React Hooks - PullRequest
Новая
       25

Извлечение данных из Prismic API с использованием React Hooks

0 голосов
/ 24 апреля 2019

Я пытаюсь запросить данные из API-интерфейса системы управления головкой Prismic и сталкиваюсь с проблемами с использованием React Hooks.Призменный API возвращает ноль, хотя я знаю, что он был передан правильно, поскольку я могу успешно запросить его, не используя ответные ловушки.

Вот мой текущий компонентный код.Его возвращение "не может прочитать свойство '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;

Ответы [ 2 ]

1 голос
/ 24 апреля 2019

Похоже, что при начальном рендеринге 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;
0 голосов
/ 24 апреля 2019

Разобрался, я верю.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;
...