Блог

У меня есть этот api, который возвращает массивы значений:

 app.get("/events", (req, res) => {
  let response = null;
  let authObj = auth.authorize();

  setTimeout(() => {
    let result = controller.listEvents(authObj);

    result.then((data) => {
      response = data;
      console.log(data)
      res.json(response); // is this way of passing this data object to front-end right ???
    });
  }, 2000);
});

  

результат console.log(data) выше выглядит следующим образом:

 [
  {
    kind: 'calendar#event',
    etag: '"3203302285276000"',
    id: '69jte9qmoij84irjf2ktlqlqcd',
    status: 'confirmed',
    htmlLink: 'https://www.google.com/calendar/event?eid=NjlqdGU5cW1vaWo4NGlyamYya3RscWxxY2QgYmFudWthamFuYW5hdGhqYXlhcmF0aG5hQG0',
    created: '2020-10-02T15:05:42.000Z',
    updated: '2020-10-02T15:05:42.638Z',
    summary: 'What’s New in Lens 3.6.0',
  },
  {
    kind: 'calendar#event',
    etag: '"3200206562152000"',
    id: '_6l6jehjbbtol8him9194uqr88907cjaoct3japrle5a3ii9o6ds62t3kcln68pb5',
    status: 'confirmed',
    htmlLink: 'https://www.google.com/calendar/event?eid=XzZsNmplaGpiYnRvbDhoaW05MTk0dXFyODg5MDdjamFvY3QzamFwcmxlNWEzaWk5bzZkczYydDNrY2xuNjhwYjUgYmFudWthamFuYW5hdGhqYXlhcmF0aG5hQG0',
    created: '2020-09-14T17:07:55.000Z',
    updated: '2020-09-14T17:08:01.076Z',
    summary: 'Ansible Contributor Summit - New Contributor Workshops',
   
  }
]
  

И я хочу передать это data в свой интерфейс и выполнить итерацию по нему, чтобы отобразить summary , status .

Вот как я получаю это значение в свой интерфейс:

  const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then((res) => {
      console.log(res);
      setData(res.data);
    });
  });
  

Но когда я пытаюсь распечатать data , он выдает undefined

Может кто-нибудь мне помочь?

Спасибо!

Параметр является ответом. Это не результат запроса, он содержит только заголовки. Вам нужно

  const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then(res => res.json()).then((res) => {
      console.log(res);
      setData(res);
    });
  }, []);
  

Помните пустой массив зависимостей. Вы не хотите извлекать данные каждый раз, когда компонент отображает, только один раз.

Результат не имеет свойства data, это просто массив. Так что используйте setData(res); , а не setData(res.data);

Попробуйте, потому что вы ожидаете json

 const [data, setData] = useState([]);
 useEffect(() => {
    fetch("/events").then((res) => {  
    return res.json()
    }).then((responseJson) => {
       console.log(responseJson);
    });
  
  });