React TypeError：无法读取未定义的属性“长度”

Question

I building small react app. Main task is creating app about pokemons with PokeApi. When I clicking on pokeCard, on my sidebar must to display main information about pokemon. So, I want to be displayed number of pokemon. How we know, all numbers starts at #. But in PokeApi numbers of pokemons are not starts with # and doesn't containt any 0. For example, number of Charmander is #004, but in PokeApi Id is 4. So, I created condition with logical operators. Please, look:

  {(pokemon.id.length === 1 && <span>#00{pokemon.id}</span>) ||
      (pokemon.id.length === 2 && <span>#0{pokemon.id}</span>) ||
      (pokemon.id.length === 3 && <span>#{pokemon.id}</span>)}

I hope I created right. But, on my screen I see TypeError: Cannot read property 'length' of undefined . I think, it's because,before I will be clicking, pokemon.id is undefined. I try to create typeof(pokemon.id) == "undefined" && <span>loading</span> , but it doesn't work.

It's code, how I set Pokemon.

const [SelectedPokemon, setSelectedPokemon] = useState([]);

 const fetchPokemonDetails = (pokemonId) => {
    fetch(`${API_URL}${pokemonId}`)
      .then((result) => result.json())
      .then((result) => {
        setSelectedPokemon(result);
      }, setLoadingForSelectedPokemon(false))
      .catch((error) => console.log("Error:", error));
  };

Can you help me fix it?

Answer 1

You are trying to access the property before its defined. Can you try with the code snippet below?

{pokemon.id !== undefined ? 
(pokemon.id.length === 1 && <span>#00{pokemon.id}</span>) ||
      (pokemon.id.length === 2 && <span>#0{pokemon.id}</span>) ||
      (pokemon.id.length === 3 && <span>#{pokemon.id}</span>)
: null}

Answer 2

You should ensure the data called properly. it is occurred because your data is not ready yet.

the code should be like this

{(pokemon && pokemon.id.length === 1 && <span>#00{pokemon.id} 
 </span>) ||
  (pokemon && pokemon.id.length === 2 && <span>#0{pokemon.id} 
 </span>) ||
  ( pokemon && pokemon.id.length === 3 && <span>#{pokemon.id} 
 </span>)}

Answer 3

The main problem is that you are trying to use pokemon.id before it is actually defined. I would recommend putting your statements in another if like:

{ pokemon.id ? this.handleId(pokemon.id) : "" }

where

handleId = (id) => {
  let holder = "#000";
  let arr = holder.split("");
  id.split("").reverse().map((e, i) => arr[3 - i] = e);
  return arr.reduce((a, b) => a + b);
}

I believe this solves your problem and handleId can be used with an id of any length.