Javascript 反应类型错误：无法读取属性'；长度'；未定义的

我正在构建一个小应用程序。主要任务是用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>)}

---

你能帮我修一下吗？

你应该确保数据调用正确。 这是因为您的数据尚未准备好

代码应该是这样的

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

{（pokemon&&pokemon.id.length==1&&00{pokemon.id}
) ||
（pokemon&&pokemon.id.length==2&&0{pokemon.id}
) ||
（pokemon&&pokemon.id.length==3&&#{pokemon.id}
)}

您正试图在定义属性之前访问该属性。你能试试下面的代码片段吗

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

{pokemon.id！==未定义？
（pokemon.id.length==1&�{pokemon.id}）||
（pokemon.id.length==2&�{pokemon.id}）||
（pokemon.id.length==3&&{pokemon.id}）
：null}

主要问题是，您试图在实际定义口袋妖怪.id之前使用它。如果愿意，我建议将您的声明放在另一个版本中：

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

在哪里

---

我相信这解决了您的问题，

handleId

可以与任何长度的

id

一起使用。

表示

id

未定义。。。。听起来你好像是在设置之前渲染了一些东西。@epascarello我是怎么理解的，你是怎么说的。但我不知道如何避免它。当我点击按钮时，它必须响应。如果没有看到你如何设置

口袋妖怪
@epascarello的反应代码，很难知道。我编辑了我的帖子，添加了代码，我如何在底部设置口袋妖怪。我试过了。它没有显示任何错误。它也不会显示pokemon.id。它正在运行您的解决方案。我只是将id（数字）的类型格式化为string.Awesome。谢谢你的投票。如果你也能选择这个作为答案，那就太酷了。我试过了。而且它显示的-
pokemon.id.split不是一个函数。也许，这是因为当我设置口袋妖怪时，我将它设置为object。当你记录口袋妖怪对象时，你会得到什么？这个：{能力：数组（2），基本经验：64，形式：数组（1），游戏索引：数组（20），高度：7，…}从你的评论来看，这个对象似乎没有
id
属性。所以，如果我点击时只有
{pokemon.id}
，我会看到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);
}