React TypeError: Невозможно прочитать свойство 'length' из неопределенного

Question

Я строю небольшое приложение реагировать. Основная задача - создать приложение про покемонов с помощью PokeApi. Когда я нажимаю на pokeCard, на моей боковой панели должна отображаться основная информация о pokemon. Итак, я хочу, чтобы отображалось количество покемонов. Как мы знаем, все номера начинаются с #. Но в PokeApi число покемонов не начинается с # и не содержит 0. Например, число Charmander равно # 004, а в PokeApi Id равно 4. Итак, я создал условие с помощью логических операторов. Пожалуйста, посмотрите:

  {(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>)}

Надеюсь, я создал правильно. Но на моем экране я вижу TypeError: Cannot read property 'length' of undefined. Я думаю, это потому, что прежде чем я нажму, pokemon.id не определен. Я пытаюсь создать typeof(pokemon.id) == "undefined" && <span>loading</span>, но это не работает.

Это код, как я устанавливаю 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));
  };

Можете ли вы помочь мне это исправить?

Answer 1

Вы пытаетесь получить доступ к свойству до его определения. Можете ли вы попробовать с фрагментом кода ниже?

{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

Основная проблема заключается в том, что вы пытаетесь использовать pokemon.id до того, как оно действительно будет определено. Я бы порекомендовал поместить ваши утверждения в другое, например:

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

, где

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);
}

Я считаю, что это решает вашу проблему, и handleId можно использовать с id любого длина.

Answer 3

Вы должны убедиться, что данные вызываются правильно. это произошло потому, что ваши данные еще не готовы.

код должен быть таким

{(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>)}