如何在React Native中解析JSON并提取Axios接口返回的指定字段

第一步：修正响应数据解析逻辑 #

你自定义了transformResponse配置后，Axios默认的响应JSON自动解析逻辑会失效，现在你存入data3的是原始字符串格式的响应，无法直接提取字段，需要先手动转成JSON对象：

Axios({
  url: '/Authentification',
  method: 'get',
  baseURL: 'http://smart.netrostercloud.com/api',
  transformRequest: [
    function (data, headers) {
      return data;
    },
  ],
  transformResponse: [
    function (data) {
      // 手动将响应字符串转成JSON对象
      const parsedRes = JSON.parse(data);
      setData3(parsedRes);
      return data;
    },
  ],
  headers: {
    Authorization: 'Basic UxvwJc1GWjkOCyZoIHGuCD05gDUB72sqrgK30FgILho=',
  },
});

第二步：提取目标字段 #

React的state更新是异步的，你直接在Axios调用语句后打印data3拿到的是更新前的旧值，需要通过useEffect监听data3的变化后再提取字段：

import { useEffect } from 'react';

// 放在组件内部
useEffect(() => {
  // data3为空时不执行逻辑
  if (!data3) return;
  // 根据返回结构取实际数据层，部分.NET接口会把数据包在d字段内，和你截图的结构匹配
  const resData = data3.d || data3;
  // 解构提取目标字段
  const { CompanyCode, UserName, Password, FirstName, LastName } = resData;
  // 此处可直接使用提取到的字段
  console.log('提取结果：', { CompanyCode, UserName, Password, FirstName, LastName });
}, [data3]);

注意事项 #

• 如果提取字段为空，可先打印data3确认实际返回结构，去掉.d直接从data3下取值即可。
• 可根据需求把提取到的字段单独存入其他state，或者直接在业务逻辑中使用。

内容的提问来源于stack exchange，提问作者Mira