警告数组或迭代器中的每个孩子都应该有一个唯一的 key prop。反应原生

Question

我已经构建了 React Native App，但我遇到了“Api”t 没有给出的问题 我一个错误，但我给了我一个交战或每个项目都应该有唯一的关键我 没有找到我如何解决这个问题的任何解决方案。

如何在函数中使用唯一键

** 如何修复reactjs警告：数组中的每个孩子都应该有一个独特的道具......？ 2**

<View style={styles.contanier}>
    {this.props.data.map(function(videoData, index) {
      console.log(videoData, "fetch3");
      return (
        <View style={styles.card_contanier}>
          <TouchableOpacity
            style={{ flex: 1 }}
            // onPress={() => this.onforward()}
          >
            <View style={{ height: "45%" }}>
              <Image
                source={require("../img/special-page-banner.jpg")}
                style={{
                  flex: 1,
                  width: imageWidth,
                  resizeMode: "stretch"
                }}
              />
            </View>
            <View style={styles.title}>
              <Text
                style={{ color: "black" }}
                numberOfLines={2}
                ellipsizeMode={"tail"}
              >
                {videoData.name}
              </Text>
            </View>
            <View style={{ height: "20%" }}>
              <View style={styles.buttom_contanier}>
                <View style={styles.logo}>
                  <Thumbnail
                    source={require("../img/andy-sm.png")}
                    style={{ height: 32, width: 32 }}
                  />
                </View>
                <View style={{ flexDirection: "column" }}>
                  <View style={{ flexDirection: "row", left: 5 }}>
                    <Text
                      style={{ color: "black" }}
                      numberOfLines={1}
                      ellipsizeMode={"tail"}
                    >
                      {videoData.created_by_user.name}
                    </Text>
                  </View>
                  <View style={styles.iconic_contanier}>
                    <Icon name="calendar" size={10} style={{ top: 2 }} />
                    <Text style={styles.text}>10 Oct 2018</Text>
                  </View>
                  <View style={styles.iconic_contanier}>
                    <Icon name="eye" size={10} style={{ top: 2 }} />
                    <Text style={styles.text}>11 views</Text>
                  </View>
                </View>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      );
    })}
  </View>

Answer 1

首先而不是推荐的方法是使用您获得的索引作为 .map 回调中的第二个参数

<View style={styles.contanier}>
    {this.props.data.map(function(videoData, index) {
      console.log(videoData, "fetch3");
      return (
        <View key={index} style={styles.card_contanier}>

但不推荐使用索引。如果您有来自后端的 id，我将使用它。如果您使用索引，这可能会导致动画等问题。

<View style={styles.contanier}>
    {this.props.data.map(function(videoData, index) {
      console.log(videoData, "fetch3");
      return (
        <View key={videodata.id} style={styles.card_contanier}>

您可以在这里阅读所有这些内容https://reactjs.org/docs/lists-and-keys.html#keys

还有关于为什么不使用索引的文章https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318