应用程序崩溃是因为平面列表API调用

Question

我正在调用API并在日志中看到相应的API值时，它显示了正确的值，但是当我尝试借助Hooks的应用程序崩溃，尝试将API设置在平面列表中。我不知道我是新手React Native的原因，因此对此的任何帮助将不胜感激。 注意（如果我直接显示没有平面列表的值，则不会导致任何错误）

function Item({ item }) {
    const navigation = useNavigation();   
  
      return (
        

        <TouchableOpacity style={styles.listItemBox}
        onPress={() => navigation.navigate('PatientDemographics')}
        >
          <View style={{flex:1}}>

            <Text numberOfLines={1} style={{ textAlign: 'left', fontSize: 25, color:"#075430", textAlign: 'center',fontFamily:"Montserrat-Regular"}}>{item.firstName}</Text>

        
            <TouchableOpacity style={[styles.smallRoundedBlueRoundedNoMargin,{marginTop:10,marginBottom:40}]}
                   onPress={() => navigation.navigate('PatientDemographics')} >
              <Text style={[styles.cardText,{fontSize: 18},{color: 'white'}]}>SELECT </Text>
            </TouchableOpacity>
      


              </View>


      
 
        </TouchableOpacity>
       
            );
    }

const SelectPatient = () => {

   
   let  numColumns = 4;
    const formatData = (data, numColumns) => {
     const numberOfFullRows = Math.floor(data.length / numColumns);
 
       let numberOfElementsLastRow = 8 - (numberOfFullRows * numColumns);
       while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) {
         data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
         numberOfElementsLastRow++;
        
       }
       return data;
     };
      
  // const navigation = useNavigation(); 

     const [isLoading, setLoading] = useState(true);
     const [patient, setPatient] = useState([]);
     const mrnum=89
  
     useEffect(() => {
     
      axios({
          method: 'get',
          url: `https://emr-system.000webhostapp.com/emrappointment/emrappointment/patient/search?mrnum=89&cnic=&qrcode=`,
        }).then((response) => {
  
              //Balance / transaction-list
              setPatient(response.data.result);
              console.log(response.data.result);
              console.log(patient[0].patientId);
  
        }).then(() => setLoading(false));
    }, []);
  
   
  
 

    
    return (
    
        <View style={styles.container}>
          <Header name="Select Patient" class= ""/>
          
      
            <UnitClerkHeader/>
            <PatientHeader/>
         <View style= {{flex:1 ,width: '100%', alignSelf: 'center'}}>
         <SafeAreaView style={{flex:1}} >
        <FlatList
  
          style={{flex:1, marginTop: 30, marginRight:30,marginLeft:30}}
          data={ formatData(patient,numColumns)}
          renderItem={({ item }) => <Item item={item}/>}
          keyExtractor={item => item.patientId}
          numColumns = {numColumns}
         
        /> 
        </SafeAreaView>
  

        </View>

        </View>
       
      
    
    );
  }
export default SelectPatient;

Answer 1

您可以尝试我可以更好地帮助您。

<FlatList
  style={{ flex: 1, marginTop: 30, marginRight: 30, marginLeft: 30 }}
  data={() => formatData(patient, numColumns)}
  renderItem={({ item }) => <Item item={item} />}
  keyExtractor={item => item.patientId}
  numColumns={numColumns}
/>

当您显示错误时，