在我的反应原生项目中使用 axios 显示对象给出未定义

Posted 2023-02-22

【中文标题】在我的反应原生项目中使用 axios 显示对象给出未定义

【英文标题】：Display object with axios in my react native project gives undefined

【发布时间】：2022-01-21 00:31:18

【问题描述】：

我试图从 phpMyAdmin 获取请求数据，然后将其输出到我的 react 本机项目中，我使用 response.data.username，但我得到了未定义。

const getInfo = () => 
  axios.get("https://luxrealest.com/includes/user_registration.php").then(
    (response) => 
      console.log(response.username);
      setDataInfo(response.data.username + " " + response.data.email);
    )

getInfo()

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js" integrity="sha512-u9akINsQsAkG9xjc1cnGF4zw5TFDwkxuc9vUp5dltDWYCSmyd0meygbvgXrlc/z7/o4a19Fb5V0OUE58J7dcyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

预期

Object 
  "": Object 
    "email": "[e-mail]",
    "id": "11",
    "username": "myke",
  ,
  "1": Object 
    "email": "[e-mail]",
    "id": "12",
    "username": "General.Bigman",
  ,
  "2": Object 
    "email": "[e-mail]",
    "id": "13",
    "username": "Jaycee",
  ,

【问题讨论】：

我试图让你成为minimal reproducible example - 当我将 Axios 小写时出现 CORS 错误

@mplungjan，使用 Postman 我能够从该 URL 获得响应。在浏览器中，我也收到 CORS 错误。

Postman 不会给出 CORS 错误。您尝试访问的端点需要实现Access control allow origin

【参考方案1】：

鉴于数据的形状，您需要像这样迭代此对象：

 for (let key in response.data) 
     setDataInfo(response.data[key].username + " " + response.data[key].email);
 

这当然会为您的数据调用setDataInfo 3 次。如果您只需要特定用户，则需要添加额外的逻辑。

【讨论】：

请问这是什么逻辑，能不能给我举个例子，因为它没有打印出来

你可以尝试几件事： 1. 检查浏览器控制台是否有任何错误，如 cmets 中提到的 CORS。 2. 如果您收到响应，请在该循环中添加例如console.log(response.data[key].username)，看看您是否获得了预期值。 3.还在axios调用中.then之后添加.catch并记录/显示错误，以便用户在获取数据时知道是否有任何问题。

好的...谢谢，我会注意的。