从变量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}]}

因为您访问错误的变量