无法将props传递给ListView行中调用的子组件

Question

我在ListView中构建一个listView。

父lisView有各种字段，需要将UID传递给子组件，这是一个listView。

当我使用新数据重新加载父列表视图时，它会将之前的道具传递给子项。因此，孩子总是有一个支持父母的支柱。

这是我父组件的代码。

    import _ from 'lodash';
    import React, { Component } from 'react';
    import { Text, ListView, View } from 'react-native';
    import { connect } from 'react-redux';
    import { Actions } from 'react-native-router-flux';
    import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
    import HorizontalProfileList from './HorizontalProfileList';
    import { CardSection, Button } from './common';
    import { athleteResultFetch } from '../actions';

    class AthleteProfile extends Component {
      componentWillMount() {
        const { RiderID } = this.props.RiderID;
        const { RiderResult } = this.props;
        this.props.athleteResultFetch({ RiderID });
        this.createDataSource({ RiderResult });
      }

      componentWillReceiveProps({ RiderResult }) {
        this.createDataSource({ RiderResult });
      }

      onGalleryPress() {
        Actions.athleteResultFetch();
      }

      createDataSource({ RiderResult }) {
        const ds = new ListView.DataSource({
          rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(RiderResult);
      }

      render() {
        const Rider = this.props.RiderID.Rider;
        return (
          <KeyboardAwareScrollView>
            <CardSection>
              <Text style={styles.textStyle}> {Rider} </Text>
            </CardSection>
            <CardSection>
              <Button
                onPress={this.onGalleryPress.bind(this)}
              >
              View gallery
              </Button>
            </CardSection>
            <CardSection>
              <ListView
                enableEmptySections
                dataSource={this.dataSource}
                style={styles.listStyle}
                renderRow={(rowData) =>
                  <View>
                    <Text
                      style={styles.eventNameStyle}
                    >
                      {rowData.Horse}
                    </Text>
                    <Text
                      style={styles.horseNameStyle}
                    >
                      {rowData.EventName} {rowData.Date};
                    </Text>
                    <HorizontalProfileList Uid={rowData.uid} />
                  </View>
                }
              />
            </CardSection>
          </KeyboardAwareScrollView>
        );
      }
    }

const styles = {
  listStyle: {
    marginBottom: 160,
  },
  eventNameStyle: {
    fontSize: 14,
    paddingLeft: 15,
    paddingBottom: 2,
    color: '#fff',
    fontWeight: '300',
  },
  horseNameStyle: {
    fontSize: 12,
    paddingLeft: 15,
    paddingBottom: 0,
    fontWeight: '300',
    color: '#C0C0C0',
  },
  resultStyle: {
    fontSize: 12,
    paddingLeft: 15,
    paddingBottom: 40,
    fontWeight: '300',
    color: '#fff',
  },
  textStyle: {
    fontSize: 18,
    paddingLeft: 15,
    paddingBottom: 15,
    color: '#fff',
    fontWeight: '300',
  },
  buttonStyle: {
    underlayColor: '#fff',
  },
  blank: {
    paddingTop: 0,
    paddingBottom: 0,
  }
};

const mapStateToProps = ({ athletes }) => {
  const RiderResult = _.map(athletes.RiderResult, (val, uid) => {
    return { ...val, uid };
  });

  return {
    RiderID: athletes.RiderID,
    RiderResult,
  };
};

export default connect(mapStateToProps, { athleteResultFetch })(AthleteProfile);

我的孩子组件在这里。

import _ from 'lodash';
import React, { Component } from 'react';
import firebase from 'react-native-firebase';
import Image from 'react-native-scalable-image';
import { Text, Dimensions, ListView, View } from 'react-native';
import { CardImage } from './common';

class HorizontalProfileList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ShowList: false,
    };
  }

  componentWillMount() {
    const { Uid } = this.props;
    firebase.database().ref(`photo/britishEventing/purchased/${Uid}`)
      .once('value', snapshot => {
        const AthleteImages = snapshot.val();
        this.createDataSource(AthleteImages);
     });
  }


  createDataSource(AthleteImages) {
    if (!AthleteImages) {
      this.setState({ ShowList: false });
    } else {
      const AthleteImageList = _.map(AthleteImages, (val, uid) => {
        return { ...val, uid };
      });

      const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
      });
      this.dataSource = ds.cloneWithRows(AthleteImageList);
      this.setState({ ShowList: true });
    }
  }

  render() {
    if (this.state.ShowList) {
      return (
        <View>
          <CardImage>
            <ListView
              horizontal={true}
              enableEmptySections
              dataSource={this.dataSource}
              style={styles.listStyle}
              renderRow={(rowData) =>
                <View style={styles.imageStyle}>
                  <Image
                    key={rowData.url}
                    width={Dimensions.get('window').width}
                    source={{ uri: rowData.url }}
                  />
                </View>
              }
            />
          </CardImage>
        </View>
      );
    }
      return (
        <View style={styles.blank}>
          <Text style={styles.blank}> . </Text>
        </View>
      );
  }
}

const styles = {
  resultStyle: {
    fontSize: 12,
    paddingLeft: 15,
    fontWeight: '300',
    color: '#fff',
  },
  imageStyle: {
    paddingTop: 10,
    marginBottom: 0,
  },
  blank: {
    marginBottom: 0,
    marginTop: 0,
    paddingBottom: 0,
    paddingTop: 0,
  }
};

export default HorizontalProfileList;