错误：“无效的数据消息 - 全部必须是长度：8” - PickerIOS

Question

编辑： 似乎如果我注释掉第 63 行的“this.setState({logged_in: true});”行，我就不会收到错误消息。我的猜测是，我试图根据用户是否登录来更改渲染函数中显示的内容的方式是导致此错误的原因。有什么想法吗？

我觉得我在理解 React Native 的一些非常基础的方面取得了一些进展。尽管我的代码可能并不漂亮，但直到最近的一些添加它才起作用。我在 IOS 模拟器中收到一条错误消息，内容为“无效的数据消息 - 全部必须是长度：8”。不幸的是，它没有给我任何我理解的细节，例如行号。

如果这是转发，我深表歉意，我一直在 google 和 * 上寻找解决此错误的方法，但我的搜索没有成功。

我已经审查了我在 fetch 中使用的 url，因为它是公司内部早期测试的地址，但我 99.99% 确信这不是问题所在。

我的 index.ios.js：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
  TextInput,
  TouchableHighlight,
  Image,
  AlertIOS,
  PickerIOS,
} from 'react-native';

var REASONS = {
  sick: {
    name: "sjuk"
  },
  vacation: {
    name: "semester"
  },
  child_care: {
    name: "vård av barn"
  },
  parenting: {
    name: "föräldraledig"
  },
  general: {
    name: "övrigt"
  },
};

export default class mbab_franvaro extends Component {

  constructor(props) {
    super(props);
    this.state = {username: '', password: '', logged_in: false, reason: 'sjuk'};
  }

  logout(){
    this.setState({logged_in: false});
    this.username = ""; this.password = "";
  }

  login(){
    if(this.state.username == "" || this.state.password == ""){
      AlertIOS.alert("Fel", "Vänligen fyll i alla fält.");
    }
    else{
      fetch("MY_PRIVATAE_COMPANY_URL", {
        method: "POST",
        headers: {
          'Accept': 'application/x-www-form-urlencoded',
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: "username=" + this.state.username + "&password=" + this.state.password,
      })
      .then((response) => response.json())
      .then((response) => {
        if(JSON.stringify(response.body).replace(new RegExp('"', 'g'), '').match("Inloggad")){
          this.username = this.state.username; this.password = this.state.password;
          this.setState({logged_in: true});
          //AlertIOS.alert("Hej!", "Välkommen " + this.username + "!");
        }
        else{
          AlertIOS.alert(
              "Fel",
              JSON.stringify(response.body).replace(new RegExp('"', 'g'), '')
          );
        }
      })
      .catch((error) => {
        AlertIOS.alert("error", error);
      })
      .done();
    }
  }

  render(){
    if(this.state.logged_in){
      //sidan för frånvarorapportering
      return (
        <View style={styles.container}>
          /*<TouchableHighlight style={styles.logout_button} onPress={() => this.logout()}>
              <Text style={styles.login_button_text}>Logga ut</Text>
          </TouchableHighlight>*/
          <View style={styles.report_wrapper}>
            <Text style={styles.header}>Frånvarorapportering</Text>
            <Text>Ange anledning och hur stor del av dagen du blir frånvarande.</Text>
            <PickerIOS
              selectedValue={this.state.reason}
              onValueChange={(reason) => this.setState({reason})}>
              {Object.keys(REASONS).map((reason) => (
                <PickerItemIOS
                  key={reason}
                  value={reason}
                  label={REASONS[reason].name}
                />
              ))}
            </PickerIOS>
          </View>
        </View>
      );
    }
    else{
      //inloggningssidan
      return (
        <View style={styles.container}>
          <Image resizeMode="center" style={styles.logo} source={require('./app/res/logo_cmyk.png')} />
          <TextInput
            placeholder="Namn"
            autocorrect={false}
            style={styles.text_box}
            onChangeText={(username) => this.setState({username})}
          />
          <TextInput
            placeholder="Lösenord"
            autocorrect={false}
            secureTextEntry={true}
            style={styles.text_box}
            onChangeText={(password) => {this.setState({password})}}
          />
          <TouchableHighlight style={styles.login_button} onPress={() => this.login()}>
              <Text style={styles.login_button_text}>Logga in</Text>
          </TouchableHighlight>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F4F4F4',
  },
  report_wrapper: {
    flex: 1,
  },
  logout_button: {
    flex: 0,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 10,
    marginRight: 10,
    marginTop: 30,
    marginBottom: 2,
    padding: 10,
    backgroundColor: "#003878"
  },
  login_button: {
    flex: 0,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 10,
    marginRight: 10,
    marginTop: 2,
    marginBottom: 2,
    padding: 10,
    backgroundColor: "#003878"
  },
  login_button_text: {
    color: "white",
    fontSize: 20,
    flex: 1,
    textAlign: "center",
  },
  logo: {
    //flex: 1,
  },
  text_box: {
    height: 40,
    flex: 0,
    backgroundColor: "white",
    marginLeft: 10,
    marginRight: 10,
    marginTop: 2,
    marginBottom: 2,
    padding: 10
  },
  header: {
    color: "#84754E",
    fontSize: 25,
    marginTop: 30,
  },
});

AppRegistry.registerComponent('mbab_franvaro', () => mbab_franvaro);

编辑：

Answer 1

将toString() 添加到error 对我有用：

.catch((error) => {
  AlertIOS.alert("error", error.toString());
})

Answer 2

我在使用 ScrollView 时也遇到了同样的错误。
我花了 2 天时间才找到解决方案。
我没有从 react-native 导入 ScrollView。
检查您是否已导入 Picker。 :)