Question

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

2020-04-07

1891

javascript reactjs undefined logical-operators

我正在构建小型 React 应用程序。主要任务是使用 PokeApi 创建有关口袋妖怪的应用程序。当我单击 pokeCard 时，侧边栏上必须显示有关口袋妖怪的主要信息。所以，我想显示口袋妖怪的数量。我们知道，所有数字都以 # 开头。但在 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 && 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

主要问题是您试图在实际定义 pokemon.id 之前使用它。我建议将您的语句放在另一个 if 中，例如：

{ 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 一起使用。