Javascript 如果数据没有'；API调用中不存在吗？

如果我打这个电话，但我输入的口袋妖怪没有第二种类型，我会收到以下错误消息：

在我命名的

setPokemon

的

useState

钩子中，是否可以生成

if

语句

如果是这样的话，我如何才能做到这一点，或者如何度过这一关

 import Axios from "axios";
    import React, { useState } from "react";
    import "./SearchPokemon.css";

function PK() {
  const api = Axios.create({
    baseURL: "https://pokeapi.co/api/v2/",
  });

  const [pokemon, setPokemon] = useState({});
  const [pokemonDescription, fetchDescription] = useState({});
  const [evolution, pokemonEvolution] = useState({});

  const searchPokemon = () => {
    api.get(`pokemon/charmander`).then((response) => {
      setPokemon({
        name: response.data.name,
        height: response.data.height,
        weight: response.data.weight,
        img: response.data.sprites.front_default,
        id: response.data.id,
        type: response.data.types[0].type.name,
        type2: response.data.types[1].type.name,
      });

      api.get(`pokemon-species/${response.data.id}/`).then((response) => {
        fetchDescription({
          entry: response.data.flavor_text_entries[0].flavor_text,
          evolution: response.data.evolution_chain.url,
        });
        api.get(`${response.data.evolution_chain.url}`).then((response) => {
          pokemonEvolution({
            evolution: response.data.chain.evolves_to[0].species.name,
          });
        });
      });
    });
  };

  return (
    <div>
      <div className="main">
        <h1 style={{ textTransform: "capitalize" }}>{pokemon.name}</h1>
        <h1>No. {pokemon.id}</h1>
        <img src={pokemon.img} alt="" />
      </div>

      <div className="info">
        <h3 style={{ textTransform: "capitalize" }}>
          Type: {pokemon.type} {pokemon.type2}
        </h3>
        <h3>Height: {pokemon.height * 10} Cm</h3>
        <h3>Weight: {pokemon.weight / 10} Kg</h3>
      </div>

      <div className="desc">
        <div className="desc-info">
          <h3 style={{ textTransform: "capitalize" }}>
            {pokemonDescription.entry}
          </h3>
        </div>
      </div>

      <h1 style={{ textTransform: "capitalize" }}>
        Evolution: {evolution.evolution}
      </h1>
      <button onClick={searchPokemon}>Click me</button>
    </div>
  );
}


export default PK;

从“Axios”导入Axios；
从“React”导入React，{useState}；
导入“/SearchPokemon.css”；
函数PK（）{
const api=Axios.create({
基本URL:“https://pokeapi.co/api/v2/",
});
const[pokemon，setPokemon]=useState（{}）；
const[pokemonDescription，fetchDescription]=useState（{}）；
const[evolution，pokemonovolution]=useState（{}）；
const searchPokemon=（）=>{
api.get（`pokemon/charmander`）。然后（（响应）=>{
口袋妖怪({
名称：response.data.name，
高度：response.data.height，
权重：response.data.weight，
img:response.data.sprites.front\u默认值，
id:response.data.id，
类型：response.data.types[0].type.name，
type2:response.data.types[1].type.name，
});
get（`pokemon species/${response.data.id}/`）。然后（（response）=>{
抓取描述({
条目：response.data.flavor\u text\u条目[0]。flavor\u text，
进化：response.data.evolution\u chain.url，
});
get（`${response.data.evolution\u chain.url}`）。然后（（response）=>{
口袋妖怪解决方案({
进化：response.data.chain.evolutions_到[0].species.name，
});
});
});
});
};
返回(
{pokemon.name}
编号{pokemon.id}
类型：{pokemon.Type}{pokemon.type2}
高度：{pokemon.Height*10}厘米
重量：{pokemon.Weight/10}千克
{pokemonDescription.entry}
进化：{Evolution.Evolution}
点击我
);
}
导出默认主键；

如果我们首先查看您的错误，则未定义api响应数据中的类型的数组的索引1。因此，当您尝试访问时，它会抛出

当您不确定api的响应时，可以结合使用和设置该属性的默认值。 这样，您的代码就不会中断

在您的示例中，我相信您可以做如下操作：

const响应={
数据：{
类型：[]
}
};
console.log（response.data.types[1]？.type.name？？“选择一个值或留下一个空字符串”）；
//type2:response.data.types[1]？.type.name？？“

如果

response.data.types[1]。type

未定义，您希望为type2分配什么值？null或空字符串或其他？由于OP可能试图防止

未定义的

和

null

，因此如果使用null合并（

？

）而不是使用or运算符，它将更具表现力，更接近代码的意图。如果我们将0，“或”作为有效的值。我会做编辑的非常感谢你的回复，非常感谢！我试了一下，使它像前面提到的那样工作：type2:response.data.types[1]？.type.name，当我尝试搜索它时，我理解int，就像它忽略了不存在的特定行一样，对吗？这会导致任何已知的错误吗？