Question

我目前正在使用带有自定义组件的React-Native Flatlist来显示数据。自定义组件显示一张卡片，并在单击时显示一个模态（准确地说是RBSheet）。

问题是道具看起来好像不守旧，当我按下一张卡片时，我从另一张卡片上获得了道具数据。

我本来想在父级上获得clicked元素，但是我无法通过平面列表来显示具有正确数据的模态。

我无法绑定卡片以从其道具中获取数据。

我的自定义组件（Entry.js）

return (
    <View
      style={{
        flexDirection: "row",
        alignContent: "center",
        alignItems: "center",
        textAlign: "center",
        marginBottom: "5%"
      }}
    >
      <View style={{ flexDirection: "row" }}>
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            justifyContent: "center",
            alignContent: "center",
            alignItems: "center",
            textAlign: "justify"
          }}
        >
          <Card
            style={{
              padding: 10,
              elevation: 2,
              margin: 10,
              textAlign: "center",
              width: "95%",
              borderRadius: 20
            }}
            onPress={() => this.RBSheet.open()}
          >
            <Card.Content>
              <Image
                source={{
                  uri:
                    "http://guiadigital.madridactiva.anovagroup.es/" +
                    props.item.fotos[0]
                }}
                style={{
                  width: "100%",
                  height: 200,
                  padding: 5,
                  borderRadius: 10
                }}
                PlaceholderContent={<ActivityIndicator />}
              />

              <Text
                style={{
                  color: "#484855",
                  fontSize: RF(3.5),
                  paddingTop: 25,
                  textAlign: "center"
                }}
              >
                {props.item.nombre}
              </Text>

              <Text
                style={{
                  color: "#484855",
                  fontSize: RF(2),
                  paddingTop: 15,
                  textAlign: "center"
                }}
              >
                {props.item.descripcion.split(".")[0]}
              </Text>
            </Card.Content>
          </Card>
        </View>
      </View>
      <RBSheet
        ref={ref => {
          this.RBSheet = ref;
        }}
        animationType="slide"
        closeOnPressMask={true}
        height={RF(80)}
        duration={100}
        customStyles={{
          container: {
            justifyContent: "center",
            alignItems: "center",
            textAlign: "center",
            alignContent: "center",
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20
          }
        }}
      >
        <Text
          style={{
            color: "#484855",
            fontSize: RF(3.5),
            paddingTop: 25,
            textAlign: "center"
          }}
        >
          {props.item.nombre}
        </Text>
      </RBSheet>
    </View>
  );

我的平面列表（以防万一）

<View
            style={{
              flex: 1,
              justifyContent: "center",
              textAlign: "center",
              alignItems: "center",
              marginTop: "5%"
            }}
          >
            <FlatList
              style={{
                width: "100%",
                alignContent: "center",
                backgroundColor: "#000"
              }}
              data={this.state.data}
              showsVerticalScrollIndicator={true}
              keyExtractor={item => item.nombre}
              renderItem={({ item }) => <Entry item={item} />}
            />
          </View>

我希望能够在我的自定义组件或平板列表屏幕中处理数据

Answer 1

我认为from django.db.models import Count, Q matches = Match.objects.filter(user=request.user).annotate( total=Count('hotleague', distinct=True, filter=Q(hotleague__user=request.user)) + Count('mega_league', distinct=True, filter=Q(megaleague__user=request.user)) + Count('head_to_head_league', distinct=True, filter=Q(head_to_head_league__user=request.user)) )应该可以控制子组件内部的数据。有关更多信息，请参见react docs https://it.reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

我已经解决了问题，问题在于该组件未声明为类，因此无法正确保存道具。

一旦将该组件声明为类并导出为类，则平面列表中的每个项目都是具有自己道具的对象。

如何在道具列表的子组件中保留道具？

2 个答案: