[W.....t]

Taki problem. W componentDidMount() pobieram sobie dane z api:

fetch('http://localhost:8080/getlist')
.then(result=>result.json())
.then(items=>this.setState({items}))

A w render() chce je wyświetlić.


{this.state.items.map(item=>| {item.obiektzagnezdzony.id} |


Tylko że ten zagnieżdżony obiekt jest opcjonalny i jak jest pusty, to wywala mi bład

Cannot read property 'id' of null

i strona nie ładuje się. Jakaś podpowiedź?
#webdev #react #javascript

[size]

@WaitForIt:

const pokaZagniezdzony = item.obiektzagniezdzony!=null;

return (|
{pokaZagniezdzony && {item.obiektzagniezdzony.id} |}

)

[W.....t]

@size: tą zmienną powinienem wcisnąć w render() przed return()?

item is not defined

@dzejro: chyba nie do końca rozumiem, items przechowuje mi wszystkie obiekty, więc jak jeden z obiektów będzie miał pusty podobiekt, to i tak ten if się wykona.

wybaczcie, react i js to dla mnie nowość ;s

[size]

@WaitForIt: Tak, w render(), przed return. Ale nie musisz deklarować zmiennej/stałej, ja to zrobiłem dla czytelności:

return (|

{item.obiektzagniezdzony!=null && {item.obiektzagniezdzony.id} |}

);

Więcej o warunkowym renderowaniu w react: https://facebook.github.io/react/docs/conditional-rendering.html

[A.....h]

@WaitForIt: A gdybyś jakoś przefiltrował ten obiekt usuwając wartości które = null?

[size]

@WaitForIt: https://codepen.io/anon/pen/LzVMGN?editors=0011

[W.....t]

@size: wygląda sensownie, ale sprawdze dopiero jutro. Dzieki wielkie za pomoc. Dam znać czy poszlo ;)

[W.....t]

@size: dziwne, w codepenie działa a lokalnie w przeglądarce nadal błąd wywalało :P Ale już sobie poradziłem.
Jeszcze raz dzięki.