如何将道具保留在 Flatlist 的子组件中？

Question

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

问题是道具好像没有保存好，当我在一张卡片上按下时，我从另一张卡片上获取道具数据。

我想在父元素上获取点击的元素，但我无法通过平面列表来显示具有正确数据的模态。

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

我的自定义组件（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>
  );

我的 Flatlist（以防万一）

<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

使用 shouldComponentUpdate 我认为您应该能够控制子组件内的数据。有关详细信息，请参阅 React 文档 https://it.reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

我已经解决了我的问题，问题是该组件未声明为 class，因此它无法正确保留道具。

一旦组件被声明并导出为 class，平面列表中的每个项目都是一个具有自己属性的对象。

如何将道具保留在 Flatlist 的子组件中？

How to keep props in a child component inside a Flatlist?

react-native

react-native-flatlist