Извлечь данные json в реактивном режиме

Question

Я хочу спросить, я смог отобразить данные API, используя метод Fetch, прежде чем я отобразил данные с помощью Flatlist, и это сработало. затем я настраиваю отображение с использованием временной шкалы, когда я отображаю данные в виде, почему они не отображаются?

мой код

 constructor(){
      super()
      this.state = {
          data: [],
          isLoading : true
      }
  }
    fetchData = async() =>{
        const { params } = this.props.navigation.state;
        const response =  await fetch('https://example.com/get_by?id_order='+ params.id);
        const json = await response.json(); // products have array data
        this.setState({data: json.data}); // filled data with dynamic array
    };
    componentDidMount(){
        this.fetchData();
  };

  renderDetail() {
    let title = <Text style={[styles.title]}>{this.state.item.awb}</Text>
    var desc = null
    if(this.state.description)
      desc = (
        <View style={styles.descriptionContainer}>   
           <Text style={[styles.textDescription]}>{this.state.description}</Text>
        </View>
      )

    return (
      <View style={{flex:1}}>
        {title}
        {desc}
      </View>
    )
  }

  renderDetail() {
    let title = <Text style={[styles.title]}>{this.state.item.awb}</Text>
    var desc = null
    if(this.state.status)
      desc = (
        <View style={styles.list}>   
           <Text style={[styles.list]}>{this.state.status}</Text>
        </View>
      )

    return (
      <View style={{flex:1}}>
        {title}
        {desc}
      </View>
    )
  }

    render(){
        const { params } = this.props.navigation.state;
        const {navigate} = this.props.navigation;
        const {timeline} = this.state;

       return(
        <View style={styles.container}>
        <Text style={styles.pageName}>{params.id}</Text>
         <Timeline renderDetail={this.renderDetail}

            circleSize={20}
            separator={true}
            circleColor='blue'
            lineColor='gray'
            timeStyle={styles.time}
            descriptionStyle={styles.description}
            style={styles.list}
            data={this.state.data}
          />
       </View>
       );
   }

Что-то не так с моим кодом? Я пытался так, но все еще не могу

Answer 1

Вы можете просто добавить data={this.state.data} к вашему Timeline компоненту. Это будет выглядеть так:

<Timeline data={this.state.data}  ...otherprops />

Обновление:

const mappedData = this.state.data.map((item => {
 return {
   time:item.date,
   title:item.awb,
   description:item.status
 }
}))

<Timeline data={mappedData}  ...other props />