Flatlist inside Flatlist : 从 parent 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（child），我尝试获取这样的数据（见下面的代码）：

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

Flatlist inside Flatlist : 从 parent Flatlist 获取数据

Flatlist inside Flatlist : get data from the parent Flatlist

react-native

react-native-flatlist

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