Question

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

我在理解React Native的一些基础知识方面取得了一些进展，我觉得。虽然我的代码可能不太漂亮，但直到最近的一些新增功能才有效。我在IOS模拟器中收到一条错误消息，内容为“无效数据消息 - 所有必须为长度：8”。遗憾的是，它没有给我任何我理解的细节，例如亚麻布。

如果这是一个重新发布，我真诚地道歉，我一直在google和stackoverflow看起来很疯狂找到这个错误的解决方案，但在我的搜索中一直没有成功。

我已经审查了我在fetch中使用的网址，因为它是在很早的阶段在公司内进行测试的地址，但我肯定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 检查您是否已导入选择器。：）

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

2 个答案: