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

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

如果这是转贴，我深表歉意，我一直在 google 和 stackoverflow 上疯狂地寻找解决这个错误的方法，但我的搜索没有成功。

我已经审查了我在 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);

编辑:

最佳答案

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

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

关于ios - 错误 : "Invalid data message - all must be length: 8" - PickerIOS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40905638/