Question

我确信我之前从未遇到此错误，但今天我运行了我的代码，当我在我的应用上转到特定屏幕时，我收到一个黄色错误，上面写着

（2）警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34; key：prop

这是代码

class Partners extends React.Component{
  constructor(props){
    super(props)
    this._renderRow = this._renderRow.bind(this);
     this.gotoPartner = this.gotoPartner.bind(this);
    this.ds= new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
    this.state = {
      dataSource: this.ds.cloneWithRows(this._partners()),
    }
  }
  gotoPartner(rowID:number){
    this.props.navigator.push({
        title: partners[rowID].title,
        component: Partner,
         passProps: {partner:partners[rowID]},
         backButtonTitle: 'Back',
      });
  };

    _partners(){
      var dataBlob = []
      for (var ii = 0; ii < partners.length; ii++) {
        dataBlob.push(partners[ii].title);
      }
      return dataBlob;
    }


_renderRow(rowData, sectionID, rowID){
  return(
    <View>
      <TouchableHighlight
                  style={styles.button}
                  onPress={() => this.gotoPartner(rowID)}
                  underlayColor='grey'>
                    <View style={styles.textimgholder}
                    >
                        <Text style={styles.buttonTitle}>{rowData}</Text> 
                        <View style={styles.imgHolder}>
                            <Image source={require('../assets/arrowIcon.png')} 
                              style={styles.arrowIcon}/>
                        </View>
                    </View>
                </TouchableHighlight>

    </View>
    )
}
separate(){
  return(
    <View>
  <Separator />
  </View>
  )
}
  render () {
    return(
      <ScrollView style={styles.mainContainer}>
      <FullSep />
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            renderSeparator= {this.separate}
      />
      <FullSep />
        </ScrollView>

      )
  }
};

Answer 1

您应在结构中的每个重复组件中指定一个名为键的属性，以识别它。看一下React docs，正是动态儿童的一部分。

在react-native app上获得黄色警告页面（独特的关键道具）

1 个答案: