React-Native：如何使用异步函数获取平面列表的数据

Question

我对原生反应还很陌生，最近一直在开发时间表应用程序。我试图从数据库获取数据并将其显示在平面列表中，但是平面列表始终显示为空。 我不太确定我做错了。当我将数据记录到控制台时，它会将正确的数据记录到控制台，但是当我尝试使平面列表呈现数据时，它显示为空

timesheets.js

export default function TimesheetScreen({ navigation }) {
      
      const getData = async () => {
        data = await getTimesheets()
        console.log(data);
        return data;
      }

      const timesheetsData = getData();
      
      const Item = ({ name }) => (
        <View style={styles.body}>
          <Text styles={styles.bodyText}>{name}</Text>
        </View>
      );
        
       const renderItem = ({ item }) => (
        <TouchableOpacity onPress={() =>navigation.navigate('DetailScreen', item)}>
          <Item name={item.name +": " + item.date}/>
        </TouchableOpacity>
      );

            return (
              <View style={styles.container}>
                <View style={styles.header}>
                  <Text style={styles.headerText}>My Timesheets</Text>
                  
                </View>
                <TextInput 
                  style={styles.searchBackground}
                  placeholder='Enter Employee Name'
                  onEndEditing={text=>console.log(text)}/>
                <FlatList
                data={timesheetsData}
                renderItem={renderItem}
                keyExtractor={item => item.clockID}
                />
              </View>
            );
          }
    

正在查询数据库的函数

export const getTimesheets = async () =>{
      //gets all employee records from collection employees
    var allTimesheets= await firebase.firestore()
    .collection('employees')
    .get();
    var timesheetsArray=[];
    for(let i=0;i<(allTimesheets.docs).length;i++){
        let timesheetsData=(allTimesheets.docs[i]).data();
       timesheetsArray.push(timesheetsData);
 
    }

谢谢

Answer 1

由于 getData 是异步的，常量 timesheetsData 在第一个渲染周期中不包含任何内容，并且当数据发生变化时您不会触发 state准备就绪，不会触发重新渲染，从而导致 FlatList 为空。

这可以通过使用 useEffect 并引入状态变量来解决，如下所示。

export default function TimesheetScreen({ navigation }) {

      const [timesheetsData, setTimeSheetsData] = useState()

      useEffect(() => {
         const getData = async () => {
           data = await getTimesheets()
           console.log(data);
           setTimeSheetsData(data);
         }

         getData()
      }, [])
      
      const Item = ({ name }) => (
        <View style={styles.body}>
          <Text styles={styles.bodyText}>{name}</Text>
        </View>
      );
        
       const renderItem = ({ item }) => (
        <TouchableOpacity onPress={() =>navigation.navigate('DetailScreen', item)}>
          <Item name={item.name +": " + item.date}/>
        </TouchableOpacity>
      );

            return (
              <View style={styles.container}>
                <View style={styles.header}>
                  <Text style={styles.headerText}>My Timesheets</Text>
                  
                </View>
                <TextInput 
                  style={styles.searchBackground}
                  placeholder='Enter Employee Name'
                  onEndEditing={text=>console.log(text)}/>
                <FlatList
                data={timesheetsData}
                renderItem={renderItem}
                keyExtractor={item => item.clockID}
                />
              </View>
            );
          }

Answer 2

我注意到你缺少状态。
在 React 中，每次状态更改都会使用新的状态数据重新渲染 UI。

获取数据库结果后，您必须使用状态变量重新渲染屏幕。
这可以通过React.useState()钩子函数来解决。

所以，请尝试一下这个方法。

 export default function TimesheetScreen({ navigation }) {
          
          const getData = async () => {
            data = await getTimesheets()
            console.log(data);
            return data;
          }

          const [data, setData] = React.useState([]);
    
          

          React.useEffect(async () => {
              const timesheetsData = await getData();
              setData(timesheetsData);
          });
          
          const Item = ({ name }) => (
            <View style={styles.body}>
              <Text styles={styles.bodyText}>{name}</Text>
            </View>
          );
            
           const renderItem = ({ item }) => (
            <TouchableOpacity onPress={() =>navigation.navigate('DetailScreen', item)}>
              <Item name={item.name +": " + item.date}/>
            </TouchableOpacity>
          );
    
          return (
            <View style={styles.container}>
              <View style={styles.header}>
                <Text style={styles.headerText}>My Timesheets</Text>
    
              </View>
              <TextInput 
                style={styles.searchBackground}
                placeholder='Enter Employee Name'
                onEndEditing={text=>console.log(text)}/>
              <FlatList
              data={data}
              renderItem={renderItem}
              keyExtractor={item => item.clockID}
              />
            </View>
          );
 }