React-native：Axios 不在 ios 上工作，但在 android 上工作。 錯誤：JSON 值 &#39;<null> &#39; 類型 NSNull 不能轉換為 NSString

Question

我運行了調試器，但 axios 發送請求失敗。 同樣的事情在Android中完美運行。 一旦它通過 axios 發送請求，模擬器上就會彈出這些紅色屏幕：

這是給出錯誤的代碼：

 /*red screen here after request send*/return axios.get(config.backend_url + '/api/firebase-user/' + firebaseId)
          .then((userDataFetchResult) => {
            dispatch(setUserGeneralData(userDataFetchResult.data.data));
            dispatch(authOperationFinished());
            return userData;
          })
          .catch(err => {
            console.log(err);
            dispatch(authOperationFailed(err));

          });

我的 package.json：

 "dependencies": {
    "axios": "^0.18.0",
    "lodash": "^4.17.5",
    "native-base": "^2.4.1",
    "react": "16.3.1",
    "react-native": "0.54.1",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-datepicker": "^1.7.1",
    "react-native-fbsdk": "^0.7.0",
    "react-native-firebase": "^4.0.0",
    "react-native-image-picker": "^0.26.7",
    "react-native-navigation": "^1.1.444",
    "react-native-twitter-signin": "^1.0.2",
    "react-native-vector-icons": "^4.6.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

我的信息.plist：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>fbXXXXXXX</string>
            </array>
        </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>fbapi</string>
        <string>fb-messenger-share-api</string>
        <string>fbauth2</string>
        <string>fbshareextension</string>
    </array>
    <key>NSCameraUsageDescription</key>
    <string>Camera Permissions</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Gallery Permissions</string>
    <key>UIAppFonts</key>
    <array>
        <string>Ionicons.ttf</string>
    </array>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>FFFF</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    <key>FacebookAppID</key>
    <string>XXXXXX</string>
    <key>FacebookDisplayName</key>
    <string>FF</string>
</dict>
</plist>

我的 AppDelegate.m：

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>

// **********************************************
// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
// **********************************************
#import <TwitterKit/TwitterKit.h>

// IMPORTANT: if you're getting an Xcode error that RCCManager.h isn't found, you've probably ran "npm install"
// with npm ver 2. You'll need to "npm install" with npm 3 (see https://github.com/wix/react-native-navigation/issues/1)

#import <Firebase.h>
#import "RCCManager.h"

#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];


  NSURL *jsCodeLocation;
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.backgroundColor = [UIColor whiteColor];
  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions];

  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<NSString *,id> *)options {

  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                             annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
                  ];

  BOOL handledT = [[Twitter sharedInstance] application:application openURL:url options:options];
  // Add any custom logic here.
  return handled || handledT;
}


- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

@end

知道可能是什么問題嗎？ 非常感謝！

編輯：顯然請求數據到達，但無論如何它都會拋出紅色屏幕。 調用它的組件的 render 方法在拋出錯誤之前也會運行幾次。 我在 componentDidMount 上調用它。 渲染方法是

render() {

    let content = (
      <CausesList
        causes={this.props.causes}
        onItemSelected={this.itemSelectedHandler}
        onLoadMore={this.onLoadMoreHandler}
      />
    ); 


    let spinner = null;

    if (this.props.causesFetchLoading || this.state.checkingFirebaseAuth) {
      spinner = <ActivityIndicator />
    }

     return (
      <View>
           <SearchBar onSearch={this.onShearchHandler} />
           <CauseCategoriesList causeCategories={this.props.causeCategories} onCategoryPressed={this.onCategoryPressedHandler} /> 
          {content}
          {spinner}
      </View>
    );
  }
}

編輯 2：這似乎與網絡無關。 我一直在使用調試器跟蹤程序，但它在呈現組件時失敗。 它必須進行一些在 android 中接受但在 ios 中不接受的轉換....

Answer 1

我通過使用調試器進行了大量挖掘來解決它，因為錯誤消息真的很神秘而且根本沒有幫助。 遺憾的是它沒有顯示更具體的內容。

最后，這與網絡無關。 數據到達但在渲染時失敗。 我開始一次刪除一個組件以查看可能是什么問題，直到問題指向具有圖像組件的卡片組件。

問題是，如果您在 React Native 中將圖像的源設置為空值，Android 將毫無問題地接受它。 但是如果你在 IOS 中這樣做，那么它會拋出你在上面看到的錯誤（紅屏）。

解決方案是如果路徑不為空，則有條件地呈現圖像。 這是我如何解決它以供將來參考：

if(props.cause.pic_url){
    image = (<Image source={{uri: props.cause.pic_url}} style={{height: 200, width: 200, flex: 1}}/>)

  }

  return (<TouchableOpacity onPress={props.onItemPressed}>
    <Card style={{flex: 0}}>
            <CardItem>
              <Left>
                  { thumbnail }
                <Body>
                <Text>{props.cause.name}</Text>
                <Text>{props.cause.hashtag}</Text>                  
                </Body>
              </Left>
            </CardItem>
            <CardItem>
              <Body>
                   { image }
                <Text>
                  {props.cause.short_description}
                </Text>
              </Body>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent textStyle={{color: '#87838B'}}>
                  <Icon name="logo-github" />
                  <Text>1,926 stars</Text>
                </Button>
              </Left>
            </CardItem>
          </Card>

  </TouchableOpacity>)