将变量的数据膨胀到FlatList

Question

我使用react-本机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(成功)输出

[{“记录集”：[{“id”：1，"UPRN":552，“SiteName”：“县厅”，"DueDate":"2019-04-26T00:00:00.000Z"，“SurveyStatus”：“已完成”，“SyncStatus”：“已完成”}，{"id":2，"UPRN":554，“SiteName”：“县大厅2"，"DueDate":"2019-03-01T00:00:00.000Z"，”SurveyStatus“：”已完成“，“SyncStatus”：“同步在建”}，{"id":3，"UPRN":1524，“SiteName”：“SiteName 3"，"DueDate":"2019-03-02T00:00:00.000Z"，”SurveyStatus“：”进行中的调查“，"SyncStatus":null}，{"id":4，"UPRN":2546，”SiteName“：”县第4厅“，"DueDate":"2019-03-15T00:00:00.000Z"，"SurveyStatus":null，"SyncStatus":null}，{"id":5，"UPRN":2156，“SiteName”：“县厅5"，"DueDate":"2019-07-01T00:00:00.000Z"，"SurveyStatus":null，"SyncStatus":null}，{"id":6，"UPRN":8945，”SiteName“："DueDate":"2019-06-01T00:00:00.000Z"，"SurveyStatus":null，”SyncStatus“：}，{"id":7，"UPRN":5214，“SiteName”：“县厅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}]}

因为您访问了错误的变量