Verwenden Sie Flatlist stattdessen scrollview

Question

Ich habe den folgenden Code, es funktioniert gut kann ich eine Verbindung zu einer API und holen Sie die Daten, da ich eine riesige Liste von Threads bekomme, wie kann ich den Code mit Flatlist stattdessen refaktorieren?

dank

import React, { Component } from 'react'; 
import { ScrollView } from 'react-native'; 
import axios from 'axios'; 
import ThreadDetail from './ThreadDetail'; 

class TopicList extends Component { 
    state = { 
    threads: [] 
    }; 

    componentWillMount() { 
    axios.get('https://xxxxxxx.devmn.net/api/v1/forums/threads?topic_id=2418', { 
     headers: { 
     'client-id': 'a0f21e' 
     } 
    }) 
     .then(response => this.setState({ threads: response.data.threads })); 
    } 

    renderThreads() { 
    return this.state.threads.map(thread => 
     <ThreadDetail key={thread.thread.id} thread={thread.thread} /> 
    ); 
    } 

    render() { 
    return (
     <ScrollView style={styles.listStyle}> 
     {this.renderThreads()} 
     </ScrollView> 
    ); 
    } 
} 

const styles = { 
    listStyle: { 
    backgroundColor: 'purple' 
    } 
} 

export default TopicList; 

Answer 1

export default class TopicList extends Component { 

    constructor() { 
      super(props); 

      this.state = { 
       threads: [] 
      } 
    } 

    componentWillMount() { 
      .... // same as your code 
    } 

    renderItem({index, item}) { 
      return <ThreadDetail thread={item.thread} /> 
    } 

    render() { 
      return <View> 
        <FlatList 
         data={this.state.threads} 
         renderItems={this.renderItem} 
         keyExtractor={(item, index) => item.thread.id} /> 
       </View> 
    } 
} 

Anmerkung: Ich habe dieses