Question

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

如何在功能中使用唯一键

** 如何解决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

的文章

警告数组或迭代器中的每个子代都应具有唯一的键道具。反应本地

1 个答案: