Question

我一直在盯着这些动作创造者：

import * as types from './constants';
import * as endpoints from 'endpoints';
import * as requester from 'services/Requester';
import * as helpers from 'account-settings/helpers/data-helpers';

export function fetchPrefences({Key}) {
  return dispatch => {
    const url = `${endpoints.v2.INDIVIDUALS}/${Key}/preferences`;
    requester.sendGet(url).then(data => {
      const payload = helpers.sortPreferences(data);
      dispatch({
        type: types.SET_USER_PREFERENCES,
        payload,
      });
    });
  };
}

export function fetchTopics() {
  return dispatch => {
    requester.sendGet(endpoints.TOPICS_OF_CONCERN).then(data => {
      dispatch({
        type: types.SET_USER_TOPICS,
        payload: data.Items,
      });
    });
  };
}

export function handleStateChange(payload) {
  return {
    type: types.SET_NEW_PREFERENCES,
    payload,
  };
}

export function handleUpdateTopics({topics, involved}, updateBoth = false) {
  return dispatch => {
    return requester
      .sendPut(endpoints.TOPICS_OF_CONCERN, {
        Items: topics,
      })
      .then(data => {
        dispatch({
          type: types.SET_USER_TOPICS,
          payload: data.Items,
        });
        if (updateBoth) {
          dispatch(handleUpdatePreferences({involved}));
        }
      });
  };
}

export function handleUpdateGetInvoved({involved}) {
  return (dispatch, getState) => {
    const {auth} = getState();
    //prettier-ignore
    const url = `${endpoints.v2.INDIVIDUALS}/${auth.user.Key}/preferences`;
    return requester
      .sendPut(url, {
        Items: involved,
      })
      .then(data => {
        const payload = helpers.sortPreferences(data);
        dispatch({
          type: types.SET_USER_PREFERENCES,
          payload,
        });
      });
  };
}

很明显，此消息使我得到data的定义未定义：

不清楚的是为什么？当我执行curl时，数据在那里：

{“ items”：[{“ category”：“ None”，“ key”：“ 2883040c-88b8-4899-bd47-114a560d085b”，“ displayText”：“能源费用”，“ isSelected”：false，“ order”：1}，{“ category”：“ None”，“ key”：“ a745a3d6-0f64-4595-8734-6082d9c914f7”，“ displayText”：“ Regulations”，“ isSelected“：false，” order“：7}，{” category“：” None“，” key“：” 51797a61-8016-4817-a46e-72dee3d8239a“，” displayText“：”最小 Wage”，“ isSelected”：false，“ order”：5}，{“ category”：“ None”，“ key”：“ 381e24d0-2668-4a69-a993-7d5e1ecaec3b”，“ displayText”：“ Taxes”，“ isSelected“：false，” order“：8}，{” category“：” None“，” key“：” dfaf22cb-111a-46f3-bce3-93fbf4a91490“，” displayText“：”失业保险”，“已选择”：假，“订单”：9}，{“类别”：“无”，“关键字”：“ c55b5d2a-a0f3-4c35-bf59-b433259b2059”，“ displayText”：“工人” 补偿”，“ isSelected”：false，“ order”：10}，{“ category”：“ None”，“ key”：“ d4b787d4-550b-4866-a5cc-c6a2de61a91a”，“ displayText”：“ Healthcare”，“ isSelected“：false，” order“：4}，{” category“：” None“，” key“：” c2557854-421d-4b2f-810f-caadf938cded“，” displayText“：”政府支出”，“ isSelected”：假，“订单”：3}，{“类别”：“无”，“关键字”：“ cf91f638-c5fa-4252-be01-dce504ae369d”，“ displayText”：“私人” 属性版权”，“已选择”：false，“订单”：6}，{“类别”：“无”，“键”：“ 0eae5ccf-2ba5-41bd-9111-efe7acafa512”，“ displayText”：“查找合格员工”，“ isSelected”：false，“ order”：2}]}％

在Swagger中，我检查了数据是否存在：

{
  "items": [
    {
      "category": "None",
      "key": "2883040c-88b8-4899-bd47-114a560d085b",
      "displayText": "Energy Costs",
      "isSelected": false,
      "order": 1
    },
    {
      "category": "None",
      "key": "a745a3d6-0f64-4595-8734-6082d9c914f7",
      "displayText": "Regulations",
      "isSelected": false,
      "order": 7
    },
    {
      "category": "None",
      "key": "51797a61-8016-4817-a46e-72dee3d8239a",
      "displayText": "Minimum Wage",
      "isSelected": false,
      "order": 5
    },
    {
      "category": "None",
      "key": "381e24d0-2668-4a69-a993-7d5e1ecaec3b",
      "displayText": "Taxes",
      "isSelected": false,
      "order": 8
    },
    {
      "category": "None",
      "key": "dfaf22cb-111a-46f3-bce3-93fbf4a91490",
      "displayText": "Unemployment Insurance",
      "isSelected": false,
      "order": 9
    },
    {
      "category": "None",
      "key": "c55b5d2a-a0f3-4c35-bf59-b433259b2059",
      "displayText": "Workers Compensation",
      "isSelected": false,
      "order": 10
    },
    {
      "category": "None",
      "key": "d4b787d4-550b-4866-a5cc-c6a2de61a91a",
      "displayText": "Healthcare",
      "isSelected": false,
      "order": 4
    },
    {
      "category": "None",
      "key": "c2557854-421d-4b2f-810f-caadf938cded",
      "displayText": "Government Spending",
      "isSelected": false,
      "order": 3
    },
    {
      "category": "None",
      "key": "cf91f638-c5fa-4252-be01-dce504ae369d",
      "displayText": "Private Property Rights",
      "isSelected": false,
      "order": 6
    },
    {
      "category": "None",
      "key": "0eae5ccf-2ba5-41bd-9111-efe7acafa512",
      "displayText": "Finding Qualified Employees",
      "isSelected": false,
      "order": 2
    }
  ]
}

我注意到在代码中items属性被写为Items，我试图将其更改为items以匹配data属性，什么也没做。

一位同事建议该问题可能在requester对象中，我也对此有疑问：

import axios from 'axios';
import LocalStorage from './LocalStorage';
import env from 'env';
import * as appcenter from 'utils/appcenterLogger';
import * as titlesHelper from 'utils/titleCaser';

let expired = false;

export const instance = axios.create({
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    NFIBAppID: env.NFIBAppID,
  },
});

let preHeaders = {};
async function mergeConfig(config) {
  try {
    const access = await LocalStorage.get('access');
    preHeaders = access;
    return {...config, headers: {...access}};
  } catch (error) {
    return {...config};
  }
}

export async function sendGet(url, config = {}) {
  if (expired) {
    return;
  }

  const now = new Date();

  return instance
    .get(url, await mergeConfig(config))
    .then(response => {
      return saveHeaders(response, now, url);
    })
    .catch(error => {
      return catchErros(error, now, url);
    });
}

export async function sendPost(url, data, config = {}) {
  if (expired) {
    return;
  }

  const now = new Date();
  return instance
    .post(url, titlesHelper.lowerCaser(data), await mergeConfig(config))
    .then(response => {
      console.log(response);
      return saveHeaders(response, now, url);
    })
    .catch(error => {
      return catchErros(error, now, url);
    });
}
export async function sendPut(url, data, config = {}) {
  if (expired) {
    return;
  }

  const now = new Date();
  return instance
    .put(url, titlesHelper.lowerCaser(data), await mergeConfig(config))
    .then(response => {
      return saveHeaders(response, now, url);
    })
    .catch(error => {
      return catchErros(error, now, url);
    });
}
export async function sendPatch(url, data, config = {}) {
  if (expired) {
    return;
  }

  const now = new Date();
  return instance
    .patch(url, data, await mergeConfig(config))
    .then(response => {
      return saveHeaders(response, now, url);
    })
    .catch(error => {
      return catchErros(error, now, url);
    });
}
export async function sendDelete(url, data, config = {}) {
  if (expired) {
    return;
  }

  const now = new Date();
  return instance
    .delete(url, await mergeConfig(config))
    .then(response => {
      return saveHeaders(response, now, url);
    })
    .catch(error => {
      return catchErros(error, now, url);
    });
}

export function saveHeaders({data, headers}, timeSent, url) {
  try {
    if (headers && headers.authorizationtoken) {
      LocalStorage.save('access', {
        AuthorizationToken: headers.authorizationtoken,
      });
    }
    const timeReceived = new Date();
    LocalStorage.save('lastTimeRequestSent', timeReceived);
    appcenter.trackRequestTiming(timeSent, timeReceived, headers, url, false);
    return titlesHelper.toTitleCase(data);
  } catch (_e) {
    return false;
  }
}

function catchErros({error, timeSent}, url) {
  try {
    const timeReceived = new Date();
    LocalStorage.save('lastTimeRequestSent', timeReceived);
    appcenter.trackRequestTiming(timeSent, timeReceived, error, url, true);

    if (error && error.response) {
      saveHeaders({
        headers: preHeaders,
      });

      const {data} = error.response;
      const message = data.message || data.Message;
      if (message.includes('TokenExpired')) {
        expired = true;
      }
    }
    return Promise.reject(titlesHelper.toTitleCase(error.response.data));
  } catch (_e) {
    return error;
  }
}

export function resetTokenExpired() {
  expired = false;
}

我看到Promise语法与async / await语法混合在一起，这可能会引起问题吗？

我试图查看问题是否出在授权令牌上，所以我将其记录下来：

let preHeaders = {};
async function mergeConfig(config) {
  try {
    const access = await LocalStorage.get('access');
    console.log(access);
    preHeaders = access;
    return {...config, headers: {...access}};
  } catch (error) {
    return {...config};
  }
}

但我成功地将其恢复了：

{AuthorizationToken: "<bunch-o-numbers>"}

这时我知道的是，如果没有saveHeaders()函数内部的逻辑，注册用户的密码将返回未定义的内容。

为了使事情复杂化，此应用程序使用了我从未实现的动作帮助器，但我发现到处都是Items属性，请记住，原始警告为Items，但我将其各处都更改为items，以使其与JSON item属性匹配，希望可以解决。

但是，我现在使用以下代码action-helpers.js遇到了这些动作帮助文件：

import * as endpoints from 'endpoints';
import * as requester from 'services/Requester';
import compareDesc from 'date-fns/compare_desc';

export async function fetchTransaction() {
  try {
    const response = await requester.sendGet(endpoints.TRANSACTIONS);
    const {Items = []} = response;
    return Items.sort((a, b) => compareDesc(a.DateTime, b.DateTime));
  } catch (error) {
    return [];
  }
}

和data-helpers.js中的

：

export function sortPreferences(data) {
  const sorted = data.Items.sort((a, b) => a.Order - b.Order);
  const communications = sorted.filter(
    p => p.Category === 'CommunicationPreferences'
  );
  const privacy = sorted.filter(p => p.Category === 'MemberPrivacy');
  const involved = sorted.filter(p => p.Category === 'GetInvolved');

  const format = data.EmailFormatType === 'HTML' ? 'HTML' : 'Plain Text';
  return {
    communications,
    privacy,
    involved,
    emailFormatType: format,
    isEmailAllowed: data.IsEmailAllowed,
    isPhoneAllowed: data.IsPhoneAllowed,
  };
}

Answer 1

很可能您没有从requester函数获得预期的响应。

尝试记录来自requester的响应并查看输出。您可能必须使用response.json()才能正确解决承诺。这是假设您的requester类/函数可以那样工作。

React Native，当我看到数据时为什么会得到未定义的数据？

1 个答案: