Блог

У меня есть интерфейс nextjs, который извлекает данные из серверной части strapi. Проблема в том, что данные пусты, даже если я вижу в журналах разработчиков strapi, что запрос был сделан.

Это next.js код

 import { useRouter } from "next/router";
import React, { useEffect } from "react";

const Room = () => {
  const router = useRouter();
  let fetchData;

  useEffect(() => {
    if (router.asPath !== router.route) {
      getDataNames();
    }
  }, [router]);

  const getDataNames = () => {
    try {
      fetch("http://localhost:1337/rooms?_id="   router.query.id)
        .then((response) => response.json())
        .then((data) => (fetchData = data));
      console.log(fetchData);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div>
      <p>{router.query.id}</p>
      <p>{fetchData}</p>
    </div>
  );
};

export default Room;
 

И вот журнал strapi

 [2021-02-23T14:06:20.845Z] debug GET /rooms?_id=6034aac1ba63472e9878ed25 (27 ms) 200
 

Но я не знаю, почему данные пусты.
Правда в том, что ответ состоит из длинного текста base64, но я не уверен, может ли это вызвать проблему.
Заранее спасибо за любую помощь.

fetch и заданное состояние являются асинхронными, поэтому ваш код будет console.log(fetchData); доступен, пока выполняется выборка и заданное состояние.

Если вы добавите другой useEffect для when fetchData is changed, вы увидите обновленное значение.

 useEffect(() => {
  console.log(fetchData);
}, [fetchData]);
 

 const Room = () => {
  const router = useRouter();
  //let fetchData;
  const [fetchData, setFetchData] = React.useState('');
  useEffect(() => {
    if (router.asPath !== router.route) {
      getDataNames();
    }
  }, [router]);

  const getDataNames = () => {
    try {
      fetch("http://localhost:1337/rooms?_id="   router.query.id)
        .then((response) => response.json())
        .then((data) => { setFetchData(data); });
      console.log(fetchData);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div>
      <p>{router.query.id}</p>
      <p>{fetchData}</p>
    </div>
  );
};
 

Вы можете использовать useState перехват для состояния реакции.