在 react-native 中获取数据 json

Question

我想问 在我使用 Flatlist 显示数据之前，我能够使用 Fetch 方法显示 Api 数据并且它可以工作。然后我使用时间轴自定义显示，当我将数据渲染到视图中时，为什么它没有出现？

我的代码

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