已单击的React Native中的丢失令牌

Question

我是React Native的新手，我认为我犯了一个小错误，但找不到它。

我在后台有Django Rest Framework API。

[首先，我打开一个列表，当我单击按钮时，它会进入没有令牌的详细信息页面。在entityclicked函数中，令牌写入null。

我也得到props.navigation.getParam不是一个函数，未定义的错误。

我想念什么？

EntityList.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity, AsyncStorage, TouchableNativeFeedbackBase } from 'react-native';
import { SafeAreaView } from 'react-navigation';


export default function EntityList( props ) {

  const [entities, setEntities] = useState([])
  let token = null;

  const getData = async () => {
    token = await AsyncStorage.getItem('OPS_Token');
    if (token) {
      getEntities();
    } else {
      navigation.navigate("Auth")
    }
  };

  useEffect(() => {
      getData();
  }, []);


  const getEntities = () => {
    console.log(token);
    fetch('http://127.0.0.1:8000/api/entities/', {
      method: 'GET',
      headers: {
        'Authorization': `Token ${token}`
      }
    })
    .then( res => res.json())
    .then( jsonRes => setEntities(jsonRes))
    .catch( error => console.log(error));
  }


  const entityclicked = (entity) => {
    console.log("Entity Clicked " + entity.id + " " + token);
    props.navigation.navigate("EntityDetail", {entity: entity, token: token});
  }


  return (
    <SafeAreaView style={styles.container}>
      <Image source={require('../assets/logo_jpg.jpg')}
      style={{width: '100%', height: 135, paddingTop: 30}}
      resizeMode="contain"/>
      <Text>{entities.length}</Text>
      <FlatList 
        data = {entities}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => entityclicked(item)}>
            <View style={styles.item}>
              <Text style={styles.itemText}>{item.entity_name}</Text>
            </View>         
          </TouchableOpacity>
        )}    
      keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>     
  ); 
}


EntityList.navigationOptions = screenProps => ({
  title: "List of entities",
  headerStyle: {
    backgroundColor: 'orange'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize:24
  },
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f00',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    flex: 1,
    padding: 10,
    height: 50,
    backgroundColor: '#fff'
  },
  itemText: {
    color: '#000',
    fontSize: 24
  }
});

entityDetail.js

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, Image, Button, AsyncStorage, Alert } from 'react-native';


export default function EntityDetail(props) {

    const entity = props.navigation.getParam('entity', null);
    const token = props.navigation.getParam('token', '');

    const [detail, setDetail] = useState(0);
    const [user, setUser] = useState([]);

    const getData = async () => {  

      console.log("Detail getData token " + token)
      if (token) {
        getEntityDetail();
        getUserInfo();
      } else {
        navigation.navigate("Auth")
      }
    };

    useEffect(() => {
        getData();
    }, []);


    const getEntityDetail = () => {
      console.log("getEntityDetail giriş");
      console.log(token);
      fetch(`http://127.0.0.1:8000/api/automobiles/${entity.id}/`, {
        method: 'GET',
        headers: {

        }
      })
      .then( res => res.json())
      .then( jsonRes => setDetail(jsonRes))
      .catch( error => console.log(error));
      console.log(detail.used_km);
      console.log("getEntityDetail çıkış");
    }

    const getUserInfo = () => {
      console.log("getUserInfo giriş");
      console.log(token);
      fetch(`http://127.0.0.1:8000/api/userinfo/`, {
        method: 'GET',
        headers: {
          'Authorization': `Token ${token}`,
        }
      })
      .then( res => res.json())
      .then( jsonRes => setUser(jsonRes[0]))
      .catch( error => console.log(error));
      console.log(user.id);
      console.log("getUserInfo çıkış");

    }

    const editclicked = (entity) => {
      navigation.navigate("EntityEdit", {entity: entity})
    }

    const checkinclicked = (entity) => {
      console.log("Checkin yapıldı " + token)
      fetch(`http://127.0.0.1:8000/api/entities/${entity.id}/checkin/`, {
        method: 'POST',
        headers: {
          'Authorization': `Token ${token}`,
          'Content-Type': 'application/json'
        },
      //  body: JSON.stringify({customer:user, entity:entity})
      })
      .then(res=>res.json())
      .then(res=>{
        Alert.alert("Checkin", res.message);
      })
      .catch(error=>console.log(error));


    }


    return (
      <View style={styles.container}>
        <Text>{user.username}</Text>
        <Text>{token}</Text>
        <Text>Id {detail.entity_id}</Text>
        <Text>Detail {entity.entity_name}</Text>
        <Button title="Degistir" color="black" onPress={() => editclicked(entity)}/>
        <Button title="Checkin yap" color="black" onPress={() => checkinclicked(entity)}/>
      </View>
    ); 
}


EntityDetail.navigationOptions = screenProps => ({
  title: entity.entity_name,
  headerStyle: {
    backgroundColor: 'orange'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize:24
  },
})




const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    flex: 1,
    padding: 10,
    height: 50,
    backgroundColor: '#282C35'
  },
  itemText: {
    color: '#fff',
    fontSize: 24
  }
});

Answer 1

我可以找到多个问题：

在EntityList中，因为您正在使用token作为全局变量，所以我认为它是此组件的状态，因此，您也应该将其置于该状态，或者最好使其变为另一个状态，例如：

const [token, setToken] = useState(null);

并执行令牌设置，如：

  const getData = async () => {
    const token = await AsyncStorage.getItem('OPS_Token');
    if (token) {
      setToken(token);
      getEntities();
    } else {
      navigation.navigate("Auth")
    }
  };

并获得传递给]的参数>

props.navigate('SomeRoute', {a: 'someA', b: 'someB'});
而不是props.navigation.getParam，您应该使用：

props.route.params.a 
// or props.route.params.b (params is the whole object passed)