Problem z dostępem do właściwości obiektu pobranego z API (React)

Question

Siemka, mam taki problem, korzystam sobie z tego API: https://openweathermap.org/forecast5. Wszystko ładnie pobieram fetchem, gdzie po pobraniu i wyodrębnieniu danych, "porządkuję" sobie każdy dzień do osobnego obiektu, którego właściwościami są poszczególnie godziny. Wszystko jest ok do momentu, gdy próbuję się odwołać do właściwości obiektu w komponencie dziecka, robię to przy pomocy notacji tablicowej (co nie jest chyba zbyt dobrą praktyką?), ponieważ robię to po kluczach.Mogę się bezproblemowo odwołać do każdego obiektu w console.log() i nie dzieje się nic złego dopóki nie próbuję odwołać się dalej do wnętrza obiektu wtedy dostaje błąd, że dana właściwość jest undefined.

Tak wyglądają dane po uporządkowaniu ich tak jak chce:

 

Tutaj pobieram i formatuje dane:

componentDidUpdate(prevProps, prevState) {
    if (prevState.value !== this.state.value) {
      const API = `https://api.openweathermap.org/data/2.5/forecast?q=${this.state.value}&appid=${APIkey}&units=metric`

      fetch(API)
        .then(response => {
          if (response.ok) {
            this.setState((
              { loaded: true, }
            ))
            return response.json()
          }
          this.setState((
            { loaded: false, }
          ))
        })
        .then(data => {
          if (data) {
            let days = []
            const cityName = data.city.name

            /*Wstawiamy do tablicy days każdy dzień, jako odrębny obiekt, którego 
            właściwościami są poszególne godziny*/
            for (let i = 0; i <= 5; ++i) {
              const actualDay = new Date().getDate()
              days.push({
                ...data.list.filter(element => {
                  const elementDay = new Date(element.dt_txt).getDate()
                  if (elementDay === actualDay + i)
                    return element
                  else return null
                })
              })
            }

            this.setState(prevState => (
              {
                cityName: prevState.cityName = cityName,
                days: prevState.days = days,
              }));
          }
        })
        .catch(err => { throw Error(err) })
    }
  }

 

"Problematyczny" komponent:

import React from 'react';
import './Result.css';
import Day from './Day';

const Result = props => {
//Takie coś działa
console.log(props.days["0"])
  return (
    <div className="result">
      <div className="today-temp">
        <h1>&#176;</h1>
        <p className="city">{props.city}</p>
      </div>
      <ul className="other-days">
        <Day />
      </ul>
    </div>
  );
}

export default Result;

Próbowałem również bawić się destrukturyzacją i dostawałem się dosyć głęboko do obiektu, ale i tak w pewnym momencie wyrzucało mi errora, że dana wartość jest undefined.

Comments

Jeśli jest to część większej aplikacji to wyodrębnij sobie tą konkretną funkcjonalność do osobnego projektu np. w codesandbox.io. Co ci coś takiego da? Po pierwsze może zauważysz błąd, naprawisz go i po problemie. Po drugie będę w sanie ci jakoś pomóc. Do pobrania danych potrzebny jest klucz api, wyekstraktuj te dane do zwykłej zmiennej

---

Ok, tak zrobiłem okroiłem appkę na tyle ile było trzeba, link wrzucam tutaj: https://codesandbox.io/s/vigilant-worker-r0xgu?file=/src/components/App.js

---

@CatSoup, pokaż pełną treść błędu z konsoli (do którego property się odnosi), którego miejsca w kodzie to dotyczy i pokaż dogłębnie strukturę danych (wystarczy w kontekście tej iteracji, w której występuje błąd lub dostajesz undefined), do której chcesz się dostać (na screenie widać tylko pozwijane obiekty).

Answer 1

Mozesz użyć nowy operator: optional chaining w miejscu wyświetlania danych  

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Comments

Nieee, chodzi mi o to żeby wyświetlać te właściwości i żeby nie były undefined, bo gdy przeglądam zawartość mojej tablicy z dniami to te właściwości są wewnątrz i mają przypisane wartości.

---

Mozesz użyć nowy operator: optional chaining

Z użyciem tej składni bym jeszcze uważał, dopóki nie ma szerokiego wsparcia: https://caniuse.com/#search=optional%20operator. Warto zabezpieczyć się użyciem transpilacji.

chodzi mi o to żeby wyświetlać te właściwości i żeby nie były undefined

Hmm, ale jeśli własność ma wartość undefined, to możesz albo jej nie wyświetlać (pominąć), albo przypisać jej wartość domyślną np. pusty string lub odpowiednik innego typu (zero, pusty obiekt itp.).

---

Właśnie mój problem polega na tym, że dane są ładnie poustawiane w tablicy i ich właściwości mają przypisaną wartość. Problem pojawia się gdy odwołuje się do niej przez props powiedzmy cos w stylu props.obiekt.godzina.main.temp, wtedy rzuca mi undefined chociaż jak wspomniałem wartość do której się odwołuję nie jest undefined.

---

JSHolic racja trzeba pamiętac o kompilatorze. Dla mnie to tak podstawowe narzędzie że zapominam że trzeba o nim mówić ;) Korzystając z TypeScript wystarczy ze zaktualizowałem TSa i nic nie musiałem konfigurować. Nie wiem jak w przypadku babela.

Proponuje optional chaining ponieważ mam przeczucie że pomoże. Dlaczego? Wydaje mi się że właściwości mogą być przez chwile undefined ponieważ uzupełniasz je w promise.

optional chaining zabezpieczy Cię przez renderowaniem bez ustawionych propsów. A w drugim renderowaniu gdy już bedą uzupełnione nie bedzie przeszkadzał i pokaże prawidłowe wartości :)

Answer 2

Udało mi się rozwiązać problem i z tego co wnioskuję chyba nie był temu winny promise, po prostu dostanie się do interesujących mnie danych osiągnąłem przy pomocy destrukturyzacji, coś w ten sposób:

const { 0: singleDay = {} } = props.days //Wyodrębniamy interesujący nas dzień
const { 3:  hour= {} } = singleDay //Następnie dostajemy się do interesującego nas obiektu godziny, w tym przypadku o kluczu 3
const { main: mainData = {} } = hour //A tutaj dostajemy się do obiektu, który mnie najbardziej interesował

console.log(mainData.temp) //Wyświetlam temperatruę