I have worked with React and Typescript and fetch a data from API. After fetching data, it will be saved as coin
object. And I absorb at the pending state, it may not have a data. So, coin
can be null. If coin
is null. Then it is no way we can get a field image
of that object. Does anyone work on this before? Please give me some ideas. I don't have experienced with typescript. Here is my code:
import React, { Component } from 'react'
import axios from 'axios';
import CoinIcon from './CoinIcon';
interface CoinDetailProps{
id:string;
}
interface CoinImage {
thumb: string ;
small: string ;
large: string ;
}
interface Coin {
id: string,
symbol: string,
name: string,
image: CoinImage | null,
description: string
}
interface CoinState{
coin : Coin;
loaded: boolean;
}
export class CoinDetail extends Component<CoinDetailProps,CoinState> {
constructor(props) {
super(props)
const init = {} as Coin;
this.state = {
coin : init,
loaded: false,
}
}
loadData = () => {
const {id} = this.props;
const url = `https://api.coingecko.com/api/v3/coins/${id}`;
axios.get(url)
.then(response => {
const data = response.data
this.setState({
coin: data,
loaded: true
})
})
.catch((error) => {console.log("Something went wrong. ", error)})
}
componentDidMount() {
this.loadData();
}
componentDidUpdate(prevProps, prevState) {
if (prevProps !== this.props) {
this.loadData();
}
}
render()
{
const {loaded, coin} = this.state;
console.log("coin image:" + coin.image.small)
return (
<div>
<CoinIcon name={coin.name} symbol = {coin.symbol} image={coin.image.small} />
</div>
)
}
}
export default CoinDetail
When I try to print out like :
console.log(coin.image.small) <=== error here: Object is possibly 'null'.
coin
can be null" - that's not what the error message says.coin.image
can benull
.coin
is not null. You declared it to be typeCoin
(as part ofCoinState
), and you initialised it with an (empty) object. As I said, the warning is not aboutcoin
, it's about.image
, on which you must not access.small
before checking whether theimage
is non-null.