时间戳

首页 > 解决方案 > 打字稿中的对象可能是“未定义”

reactjs - 打字稿中的对象可能是“未定义”

问题描述

所以这是我的组件：我正在从一个 mockAPI 发出 GET 请求，它是这样的结构：

"usuarios": [
    {
      "nome": "foo bar",
      "cpf": "213.123.123-45",
      "email": "foo_bar@email.com",
      "endereco": {
        "cep": 13454000,
        "rua": "rua talvez",
        "numero": 785,
        "bairro": "bairro azul",
        "cidade": "cidade eterna"
      },
      "id": 1
    },

等等。

当我记录 response.data 时它工作正常，当我记录状态时它工作正常，但是当我尝试记录 userList 状态数组中的对象时，我得到“对象可能未定义”。

const UserList: React.FC = () => {
  const endpoint = "http://localhost:5000/usuarios";
  const [userList, setUserList] = useState();

  const getApi = () => {
    axios
      .get(endpoint)
      .then((response) => {
        console.log(response);
        setUserList(response.data);
      })
      .catch((error) => console.log(error));
  };

  useEffect(() => {
    getApi();
  }, []);

  return (
    <div>
      <button onClick={() => console.log(userList[0])}>SEE THE API</button>

[...]

我环顾四周，看到有人说我应该更改 ts.config 对这些事情的严格程度，但有人建议我不要这样做。我似乎无法访问数组内对象的值。

标签： reactjstypescriptaxios

解决方案

问题是您声明：

const [userList, setUserList] = useState();

userList的默认值为undefined。因此访问userList[0]可能会引发运行时错误。

修复它的两种方法：

  1. const [userList, setUserList] = useState([]);默认为空数组。
  2. onClick={() => console.log(userList?.[0])}可选的链接运算符，以防止运行时错误。

推荐阅读