從變量React-Native將數據膨脹到FlatList

Question

我正在使用react-native-fs將JSON文件存儲在本地存儲中，並從JSON文件中獲取數據並將其存儲在變量中。

我想獲取存儲在變量中的數據並在FlatList上對其進行充氣。

我努力了

// getting data from the local file
var path = RNFS.DocumentDirectoryPath + '/test.json';
return RNFS.readFile(path, 'utf8')
  .then((success) => {
      console.log(success);//Data is storing successfully see console output below
      this.setState({        
      isLoading: false,
      dataSource: success.recordset //data is not getting separated with respect to recordset 
    });
    console.log(dataSource);//see outpout below
  })
  .catch((err) => {
    console.log(err.message);
  });

console.log（成功）輸出

[{“ recordset”：[[{“ id”：1，“ UPRN”：552，“ SiteName”：“ County Hall”，“ DueDate”：“ 2019-04-26T00：00：00.000Z”，“ SurveyStatus” ：“已完成”，“ SyncStatus”：“已完成”}，{“ id”：2，“ UPRN”：554，“ SiteName”：“ County Hall 2”，“ DueDate”：“ 2019-03-01T00：00： 00.000Z“，” SurveyStatus“：”已完成“，” SyncStatus“：”正在同步“}，{” id“：3，” UPRN“：1524，” SiteName“：” County Hall 3“，” DueDate “：”“ 2019-03-02T00：00：00.000Z”，“ SurveyStatus”：“進行中的調查”，“ SyncStatus”：null}，{“ id”：4，“ UPRN”：2546，“ SiteName” ：“ County Hall 4”，“ DueDate”：“ 2019-03-15T00：00：00.000Z”，“ SurveyStatus”：null，“ SyncStatus”：null}，{“ id”：5，“ UPRN”：2156， “ SiteName”：“ County Hall 5”，“ DueDate”：“ 2019-07-01T00：00：00.000Z”，“ SurveyStatus”：null，“ SyncStatus”：null}，{“ id”：6，“ UPRN” ：8945，“ SiteName”：“ County Hall 6”，“ DueDate”：“ 2019-06-01T00：00：00.000Z”，“ SurveyStatus”：null，“ SyncStatus”：null}，{“ id”：7， “ UPRN”：5214，“ SiteName”：“ County Hall 7”，“ DueDate”：“ 2020-06-01T00：00：00.000Z”，“ SurveyStatus”：null，“ SyncStatus”：null}]]

console.log（dataSource）輸出

未定義dataSource

平面代碼

    <FlatList
      data={this.state.dataSource}
      renderItem={({item}) =>
      <View style={styles.flatview}>
        <Text style={styles.name}>{item.UPRN}</Text>
        <Text style={styles.email}>{item.SiteName}</Text>
        <Text style={styles.email}>{item.DueDate}</Text>
        <Text style={styles.email}>{item.SurveyStatus}</Text>
        <Text style={styles.email}>{item.SyncStatus}</Text>
      </View>
      }
      keyExtractor={item => item.id}
    />

我該如何在FlatList中針對ID填充此數據？

Answer 1

這里發生了一些事情。

首先，您的dataSource is not defined消息是因為console.log語句不在RNFS.readFile結果的范圍內。

其次，您需要解析JSON以將json文件的內容轉換為對象，例如：

JSON.parse(success).then(result => this.setState({dataSource, result[0].recordset})

第三，它看起來recordset位於數組中，這就是為什么它在上面被引用為result[0].recordset 。

Answer 2

像那樣做

var path = RNFS.DocumentDirectoryPath + '/test.json';
return RNFS.readFile(path, 'utf8')
  .then((success) => {
      console.log(success);//Data is storing successfully see console output below

   const dataSource = success[0].recordset[0]

 this.setState({        
      isLoading: false,
      dataSource
    });
    console.log(dataSource);//see outpout below
  })
  .catch((err) => {
    console.log(err.message);
  });

該錯誤是因為您正在使用數據源，並且它是未定義的。 您需要定義您正在使用的變量。

並嘗試將您的json數組格式化為

{"recordset":[{"id":1,"UPRN":552,"SiteName":"County Hall","DueDate":"2019-04-26T00:00:00.000Z","SurveyStatus":"Completed","SyncStatus":"Completed"},{"id":2,"UPRN":554,"SiteName":"County Hall 2","DueDate":"2019-03-01T00:00:00.000Z","SurveyStatus":"Completed","SyncStatus":"sync-in-progress"},{"id":3,"UPRN":1524,"SiteName":"County Hall 3","DueDate":"2019-03-02T00:00:00.000Z","SurveyStatus":"Survey-in-progress","SyncStatus":null},{"id":4,"UPRN":2546,"SiteName":"County Hall 4","DueDate":"2019-03-15T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":5,"UPRN":2156,"SiteName":"County Hall 5","DueDate":"2019-07-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":6,"UPRN":8945,"SiteName":"County Hall 6","DueDate":"2019-06-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null},{"id":7,"UPRN":5214,"SiteName":"County Hall 7","DueDate":"2020-06-01T00:00:00.000Z","SurveyStatus":null,"SyncStatus":null}]}

因為您訪問錯誤的變量