Flatlist中的Flatlist :从父Flatlist获取数据

Question

我正在渲染多张幻灯片，每张幻灯片都有一个项目列表。因此，我不得不在Flatlist中呈现一个Flatlist，如下所示：

<FlatList
  ref={(list) => this.ref= list}
  data={this.state.buttons} // parent data
  keyExtractor={(item) => item.id.toString()}
 ...
  getItemLayout={(data, index)=> (
    {
      length: wp('100%'),
      offset: wp('100%') * index,
      index,

      borderWidth: 1, borderColor: 'red',
    }
  )}
  showsHorizontalScrollIndicator={false}
  renderItem={({item}) => {
    let parentData = item;
    let myData = this.state.listGifts + '.' + parentData.name;
    console.warn('data ', parentData, item);
    return (

      <View style={{width: wp('100%')}}>
      {
        this.state.isLoading ?
        <ActivityIndicator size='large' style={Styles.styleAI} color={Colors.mainYellow}/>
        :
        <FlatList      
        contentContainerStyle={Styles.flatContent}
        data={myData}
        // keyExtractor={(item) => item.id.toString()}
        renderItem={this.renderItem}
        removeClippedSubviews={true}
        extraData={this.state}
        />
      }
      </View>



    )
  }

  }
  extraData={this.state}
/>

我获取了两个JSON : this.state.buttons >

{
    "message": "",
    "success": true,
    "Category": [
        {
            "id": 2,
            "name": "Peinture"
        },
        {
            "id": 3,
            "name": "Cuisine"
        },
        {
            "id": 4,
            "name": "Outils"
        },
        {
            "id": 5,
            "name": "Electromenager"
        }
    ]
}

this.state.giftsList >

{
    "message": "OK",
    "success": true,
    "Peinture": [
        {
            "idCadeau": 2,
            "Cadeau": "Cadeau1",
            "Unites": "100",
        },
        {
            "idCadeau": 3,
            "Cadeau": "Cadeau2",
            "Unites": "1000",
        },
        {
            "idCadeau": 4,
            "Cadeau": "Cadeau3",
            "Unites": "50",
        }
    ],
    "Cuisine": [
        {
            "idCadeau": 5,
            "Cadeau": "Cadeau4",
            "Unites": "200",
        },
        {
            "idCadeau": 6,
            "Cadeau": "Cadeau5",
            "Unites": "2500",
        }
    ],
    "Outils": [
        {
            "idCadeau": 7,
            "Cadeau": "Cadeau6",
            "Unites": "100",
        }
    ],
    "Electromenager": [
        {
            "idCadeau": 9,
            "Cadeau": "Cadeau7",
            "Unites": "500",
        }
    ]
}

对于第二个Flatlist (子级)，我尝试像这样获取数据(参见下面的代码)：

let myData = this.state.listGifts + '.' + parentData.name;
...
data={myData}

但是它不起作用！我注释这个// keyExtractor={(item) => item.idCadeau.toString()}是因为它给出了一个错误，然后给了我一个空列表。

**

我想要的是这样的设置数据：

**

data={this.state.listGifts.Peinture}
data={this.state.listGifts.Cuisine}
data={this.state.listGifts.Outils}
...

Answer 1

如果this.state.listGifts是一个对象，那么我相信你的意思是这样做：

let myData = this.state.listGifts[parentData.name];