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）输出

数据源未定义

平面列表代码

    <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);
  });

该错误是因为您正在使用数据源，并且它是undefined。您需要定义您正在使用的变量。

，然后尝试将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}]}

因为您访问了错误的变量

从变量React-Native

2 个答案: