首页 > 解决方案 > React-Native fetch() 在第一次 yield call() 之前等于 false

问题描述

问题:

我想将stanza.io添加到我的 react-native 项目中。经过一番研究,我按照这个安装了 stanza.io。它似乎工作得很好,但甚至在达到我的新节代码之前就出现了一个问题:我有一个sagafrom redux-saga,其任务是fetch()通过 redux-saga触发 2 个同时调用,yield call()例如

const res = yield call(fetch, fetchUrl, { method: 'GET', headers });

只有第一个yield call(fetch)失败并出现错误uncaught at check call: argument false is not a function。所以我决定console.log(fetch)在 every 之前yield call(fetch),发现在第一次调用之前,fetchequalsfalse确实不是一个函数。但是对于之后的每次调用, fetch 都可以正常工作并且具有正确的原型,它现在又是一个函数。

我的抓取是通过这种方式触发的:

const [result1, result2] = yield all([
      call(fetch1, option),
      call(fetch2, option),
    ]);

这是整个文件:

import { actionChannel, call, take, put, select, all } from 'redux-saga/effects';
import { device, sanitize } from 'utils';
import config from 'config';
import idx from 'idx';
import moment from 'moment';
import { TradSingleton } from 'trads';
import { LocaleConfig } from 'react-native-calendars';

function* fetchWebTrads(language) {
  try {
    const fetchUrl = `https://example.com/some_route/${language}`;
    const headers = {
      'Content-Type': 'application/json',
    };
    const res = yield call(fetch, fetchUrl, { method: 'GET', headers });
    const response = yield res.json();
    return { trad: response };
  } catch (e) {
    console.log('Error', e);
    return { trad: null, error: e };
  }
}

function* fetchMobileTrads(language) {
  try {
    const fetchUrl = `https://example.com/another_route/${language}`;
    const headers = {
      'Content-Type': 'application/json',
    };
    const res = yield call(fetch, fetchUrl, { method: 'GET', headers });
    const response = yield res.json();
    return { trad: response };
  } catch (e) {
    console.log('Error', e);
    return { trad: null, error: e };
  }
}

function* fetchTrads() {
  try {
    moment.locale('en');
    const language = device.getTradLanguage();
    const [mobileTrads, webTrads] = yield all([
      call(fetchMobileTrads, language),
      call(fetchWebTrads, language),
    ]);
    if (mobileTrads.trad && webTrads.trad) {
      moment.locale(language);
      try {
        LocaleConfig.locales[language] = {
          monthNames: moment.months(),
          monthNamesShort: moment.monthsShort(),
          dayNames: moment.weekdays(),
          dayNamesShort: moment.weekdaysShort(),
        };

        LocaleConfig.defaultLocale = language;
      } catch (e) {
        console.log('Agenda locals fail', e);
      }
      TradSingleton.setLocale(language);
      TradSingleton.setTrads([mobileTrads.trad, webTrads.trad]);
      yield put({ type: 'FETCH_TRADS_SUCCESS' });
    } else {
      yield put({
        type: 'FETCH_TRADS_FAILURE',
        error: !mobileTrads.trad ? mobileTrads.error : webTrads.error,
      });
    }
  } catch (e) {
    console.log('Error', e);
    yield put({ type: 'FETCH_TRADS_FAILURE', error: e });
  }
}

function* watchFetchTrads() {
  const requestChan = yield actionChannel('FETCH_TRADS');
  while (true) {
    yield take(requestChan);
    yield call(fetchTrads);
  }
}

export default watchFetchTrads;

软件版本:

标签: react-nativefetchredux-sagasagastanza.io

解决方案


推荐阅读