时间戳

首页 > 解决方案 > 订单未在第一次渲染时显示，但当我按 Ctrl+S（保存）时，订单会显示

javascript - 订单未在第一次渲染时显示，但当我按 Ctrl+S（保存）时，订单会显示

问题描述

import React, {useEffect} from 'react';
import {View, Text, StyleSheet, FlatList, TouchableOpacity} from 'react-native';
import Card from '../components/Card';
import {useState} from 'react';
 
import {useIsFocused} from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const Orders = ({route, navigation}) => {
 const [userID, setUserID] = useState('');
 const [orders, setOrders] = useState([]);
 const isFocused = useIsFocused();
 
 async function getData() {
   try {
     const value = await AsyncStorage.getItem('UserID');
     if (value !== null) {
       console.log('USERID is ' + value);
       setUserID(value);
     }
   } catch (e) {}
 }
 
 function fetchOrders() {
   fetch(
     'https://somewebsite/product/GetOrdersByUserID?userid=' +
       //'1249b39a-ded0-4522-a263-f905ac30e5a3',
       userID,
   )
     .then(response => response.json())
     .then(responseJson => {
       setOrders(responseJson);
     })
     .catch(error => {
       console.error(error);
     });
 }
 getData();
 
 useEffect(() => {
    //getData();
   fetchOrders();
   console.log('UserID inside useffect:: ' + userID);
 
   console.log('inside useEffect');
 }, [isFocused]);
 
 return (
   <View>
     <View style={styles.container}>
       <FlatList
         scrollEnabled={true}
         data={orders}
         renderItem={({item}) => (
           <TouchableOpacity
             onPress={() => {
               navigation.navigate('OrderDetails', {
                 orderID: item.id,
               });
             }}>
             <View style={styles.viewPP}>
               <Card style={styles.cardPP}>
                 <Text style={styles.text}>Order ID:{item.id}</Text>
                 <Text style={styles.text}>Total: ₹{item.total}</Text>
                 <Text style={styles.text}>Placed: {item.placed}</Text>
                 <Text style={styles.text}>Status: Delivered</Text>
               </Card>
             </View>
           </TouchableOpacity>
         )}></FlatList>
     </View>
   </View>
 );
};
const styles = StyleSheet.create({
 container: {
   padding: 10,
 },
 
 text: {
   fontWeight: 'bold',
   alignContent: 'center',
 },
 cardPP: {
   margin: 10,
 },
});
export default Orders;

我的问题是我在第一次渲染时没有获得用户 ID，但是当我按 Ctrl+S（保存操作）时，我能够获得用户 ID，因此会显示订单。我的问题是我无法在第一次渲染时获取用户 ID。我已经尝试过 console.log(UserID) 并且第一次是空白的，如上所述。当我将 UserID 直接作为 1249b39a-ded0-4522-a263-f905ac30e5a3 放入 fetchOrders() 中的 'https://somewebsite/product/GetOrdersByUserID?userid=' 时，订单在第一次渲染时显示没有任何问题。请帮帮我。

标签： javascriptreactjsreact-nativereact-navigationhybrid-mobile-app

解决方案

状态更新不是同步的。就像你调用 setUserId 一样，它不会同步设置状态，让你立即使用它。它在内部通过 React 进行异步管理。如果你遵循你的承诺并传递参数等，那就更好了。如果我错过了什么，请告诉我

const Orders = ({route, navigation}) => {
 const [userID, setUserID] = useState('');
 const [orders, setOrders] = useState([]);
 const isFocused = useIsFocused();
 
 async function getData() {
   try {
     const value = await AsyncStorage.getItem('UserID');
     if (value !== null) {
       console.log('USERID is ' + value);
       setUserID(value);
       return value;
     }
     throw new ReferenceError("UserID is null");

   } catch (e) {
     return '';
   }
 }
 
 function fetchOrders(userId) {
   fetch(
     'https://somewebsite/product/GetOrdersByUserID?userid=' +
       //'1249b39a-ded0-4522-a263-f905ac30e5a3',
       userID,
   )
     .then(response => response.json())
     .then(responseJson => {
       setOrders(responseJson);
     })
     .catch(error => {
       console.error(error);
     });
 }
 
 useEffect(() => {
   getData()
   .then((v) => fetchOrders(v));
 }, [isFocused]);

推荐阅读