Question

所以这是我的组件：我正在从模拟API发出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对这些事情的严格程度，但建议我不要这样做。我似乎无法访问数组内部对象的值。

Answer 1

问题是您声明了：

const [userList, setUserList] = useState();

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

两种解决方法：

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

Answer 2

我认为您访问的数据不正确。根据您的api响应数据结构，您需要使用azcopy <FileShareSASTokenConnectionUrl> <BlobSASTokenConnectionUrl> --recursive=true而不是userList.usuarios[0]

进行访问

userList[0]

或者，您可以这样设置状态：

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

最后，请确保将默认值添加到您的状态。

.then((response) => {
   setUserList(response.data.usuarios);
  ...

Answer 3

错误是正确的。在请求完成之前的中间状态下，userList的确为undefined。 TypeScript迫使您处理这种情况。

一种解决方案是添加加载指示器：

if (!userList) return <p>Loading...</p>;

或者，添加一个空但有效的初始状态：

const [userList, setUserList] = useState([]);

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

3 个答案: