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

console.log（数据源）输出

dataSource is not defined

Flatlist代码

    <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}
    />

如何根据 id 在 FlatList 中扩充此数据？

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}]}

因为你访问了错误的变量

从变量 React-Native 将数据膨胀到 FlatList

Inflate data to FlatList from a variable React-Native

javascript

json

react-native

react-native-flatlist