javascript - 反应原生错误“将循环结构转换为 JSON -> 从具有构造函数 'FiberNode' 的对象开始”

Question

我有一个错误以本机反应的错误

将循环结构转换为 JSON -> 从具有构造函数“FiberNode”的对象开始

使用 API 单击通过 FlatList 显示的数据列表时。

我想知道哪些部分是错误的，哪些应该更正？

这是脚本：

import React, {Component} from 'react';
import { Text, View, StyleSheet, SafeAreaView, Image, TouchableOpacity,ScrollView, ActivityIndicator , FlatList} from 'react-native';
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import IconHome from '../components/IconHome';
import {Actions} from 'react-native-router-flux';
import IconLaporan from '../components/IconLaporan';
import IconNews from '../components/IconNews';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import {Fonts} from '../utils/Fonts';
import Wallpaper2 from'../components/Wallpaper2';

export default class NewCases extends Component {

  constructor(props){
    super(props)

    this.state ={
      tokens          : this.props.Tokennya,
      user            : this.props.userName,
      tokennya        : [], 
      alluser         : [],
      user_role       : [],
      ussr_role       : "",
      error           : "",
      allcases        : [],
      dataApp         : [],
      dataSess        : [],
      isLoading       : true

    }
  }

componentDidMount() {
    fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/extrarest/login-user', {
      method: 'GET',
      headers: {
        'Content-Type'        : 'application/json',
        'Accept-Encoding'     : 'gzip, deflate',
        'Authorization'       : 'Bearer '+ this.state.tokens,
      },
    }).then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson);
        this.setState({
          alluser: responseJson,
        });
        this.getUserRole(this.state.alluser.uid);
      });

    fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/case/start-cases', {
        method: 'GET',
        headers: {
        'Content-Type'        : 'application/json',
        'Accept-Encoding'     : 'gzip, deflate',
        'Authorization'       : 'Bearer '+ this.state.tokens,
        },
    }).then((response) => response.json())
        .then((responseJson) => {
        console.log(responseJson);
        this.setState({
            allcases: responseJson,
            isLoading: false
        });
    });

}
onTask = (pro,tas) => {
        fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/cases/', {
            method: 'POST',
            headers: {
                'Content-Type'        : 'application/json',
                'Accept-Encoding'     : 'gzip, deflate',
                'Authorization'       : 'Bearer '+ this.state.tokens,
            },
            body: JSON.stringify({
              'pro_uid' : pro,
              'tas_uid' : tas,
            }),
        }).then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson);
            this.setState({
                dataApp: responseJson,
            });
        });
    }
    renderItem = ({item}) =>  {
        return(
            <View style={{flex: 1}}>
                <TouchableOpacity onPress={this.onTask.bind(item.pro_uid, item.tas_uid)}>
                    <Text style={styles.textList}>
                        {item.pro_title}
                    </Text>
                </TouchableOpacity>
            </View>

        )
    }

    render2 = ({item}) => {
      return(
        <View>
        </View>
      )
    }



    renderSeparator = () => {
        return (
            <View 
                style={{height: 1, width: '100%', backgroundColor:'black'}}>
            </View>
        )
    }

  getUserRole = (userID) => {
    fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/user/' + userID, {
      method: 'GET',
      headers: {
        'Content-Type'        : 'application/json',
        'Accept-Encoding'     : 'gzip, deflate',
        'Authorization'       : 'Bearer '+ this.state.tokens,
      },
    }).then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          user_role: responseJson
        });
        if(this.state.user_role.usr_role == 'PROCESSMAKER_ADMIN')
          this.setState({
            ussr_role: 'Administrator'
          })
        else if(this.state.user_role.usr_role == 'PROCESSMAKER_OPERATOR')
          this.setState({
            ussr_role: 'Operator'
          })
        else if(this.state.user_role.usr_role == 'PROCESSMAKER_MANAGER')
          this.setState({
            ussr_role: 'Manager'
          })
      })
  }
  render() {
    return (
        this.state.isLoading
        ?
        <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
            <ActivityIndicator size="large" color="#330066" animating />
        </View>
        :
        <Wallpaper2>

            <View style={styles.shape2}>
            <Text style={styles.asihPutera}> ASIH PUTERA </Text>
            <Text style={styles.usernamenya}>{this.state.alluser.username}</Text>
            <Text style={styles.logIn}>{this.state.ussr_role}</Text>
                <Image style={styles.iconLogin} source={require('../images/Person.png')}/>
            </View>
            <Text style={styles.cases}> -PROCESS LIST- </Text>
            <View style={styles.garis} />
            <FlatList
                            data={this.state.allcases}
                            renderItem={this.renderItem}
                            keyExtractor={(item, index) => index.toString()}
                            ItemSeparatorComponent={this.renderSeparator}

                        />
            <View style={styles.garis} />
        </Wallpaper2>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  home: {
    width: 50,
    height: 50,
  },
  laporan: {
    width: 50,
    height: 50,
  },
  setting: {
    width: 133,
    height: 45,
    color: '#015c6f',
    fontFamily: Fonts.Lato2,
    fontSize: 18,
    fontWeight: '700',
    lineHeight: 43.2,
    marginLeft: 145
},
  shape2: {
    width: 723,
    height: 40,
    backgroundColor: '#00ffc6',
    flexDirection: 'row',
  },
  asihPutera: {
    marginTop: 5,
    marginLeft:10,
    color: '#015c6f',
    fontFamily: Fonts.Lato,
    fontSize: 20,
    fontWeight: 'bold',
    fontStyle: 'italic',
  },
  logIn: {
    color: '#0d535d',
    fontSize: 8,
    marginLeft: -55,
    fontFamily: Fonts.Lato3,
    marginTop: 25,
  },
  usernamenya: {
    color: '#0d535d',
    fontSize: 15,
    marginLeft: 105,
    fontFamily: Fonts.Lato3,
  },
  iconLogin: {
    marginTop:-5,
    width: 50,
    height: 50,
  },
  madrasah: {
    color: '#015c6f',
    fontFamily: Fonts.Lato4,
    fontSize: 30,
    textAlign: 'center',
    marginTop: 10,
  },
  shape3: {
    width: 723,
    height: 50,
    marginTop:30,
    backgroundColor: '#00ffc6',
    flexDirection: 'row',
  },
  shape4: {
    marginTop: 15,
    width: 290,
    height: 120,
    borderRadius: 10,
    borderColor: '#707070',
    borderStyle: 'solid',
    borderWidth: 1,
    backgroundColor: '#015c6f',
    //marginLeft: 35,
    alignSelf: 'center'
  },
  daycare: {
    color: '#feffff',
    fontFamily: Fonts.Lato3,
    fontSize: 18,
    textAlign: 'center',
    marginTop: 30,
  },
  aliyah: {
    color: '#feffff',
    fontFamily: Fonts.Lato3,  
    fontSize: 18,
    textAlign: 'center',
    marginTop: 20,
  },
  newcase: {
    width : 100,
    height: 100,
    marginTop: 45,
    marginLeft: 40,
  },
  garis:{
    width: 360, 
    height: 2, 
    backgroundColor: 'gray',
    marginVertical: 1
  },
  inbox: {
    width : 100,
    height: 100,
    marginTop: 45,
    marginLeft: 80,
  },
  keuangan: {
    width : 100,
    height: 100,
    marginTop: 90,
    marginLeft: 40,
  },
  akademik: {
    width : 100,
    height: 100,
    marginTop: 90,
    marginLeft: 80,
  },
  cases: {
    color: '#015c6f',
    fontFamily: Fonts.Lato,
    fontSize: 40,
    marginTop: 30,
    fontStyle: 'italic',
    fontWeight: 'bold',
    alignSelf: 'center',
  },
  bgdraftnya: {
        backgroundColor: '#cfe6f4',
    },
    bglist: {
        backgroundColor: '#FFFFFF',
        fontSize: 20
    },
    garis:{
        width: 360, 
        height: 2, 
        backgroundColor: 'gray',
        marginVertical: 2
    },
    garis2:{
        width: 360, 
        height: 4, 
        backgroundColor: 'gray',
    },
    textasih:{
      marginVertical:20,
      marginHorizontal: 90,
      fontFamily: Fonts.LexendExa,
      fontSize: 20
    },
    buttonText: {
        fontSize : 16,
        fontWeight : '500',
        color: '#FFFFFF',
        textAlign:'center'
    },
    textwelcome:{
        marginHorizontal: 15,
        fontFamily: Fonts.LexendExa,
        fontSize: 15,
    },
    bgheader:{
       backgroundColor: '#99CCFF'
    },
    textList:{
        paddingVertical: 15, 
        paddingHorizontal: 8,
        fontSize: 14
    }
});

希望我能在这里得到帮助。

标签： javascriptreactjsreact-nativesyntax-errorreact-native-flatlist

Answer 1

这个错误可能是由 JSON.stringify 方法引起的，所以我看到的唯一使用它的地方是 onTask 函数内部

body: JSON.stringify({
              'pro_uid' : pro,
              'tas_uid' : tas,
            }),

, 所以你应该检查它的参数pro和tas

我想这段代码看起来很可疑

this.onTask.bind(item.pro_uid, item.tas_uid)

绑定函数的第一个参数应该是上下文，尝试将其更改为

this.onTask.bind(this, item.pro_uid, item.tas_uid)

并检查它是否有效