Почему мой компонент несколько раз отображается в React-Native? - PullRequest
Новая
       79

Почему мой компонент несколько раз отображается в React-Native?

0 голосов
/ 16 июня 2020

У меня есть родительский компонент ( uploadVimeo. js), который вызывает дочерний компонент ( item. js) при итерации по списку видео.

uploadVimeo. js

 export default class UploadVimeo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      videos: []
    }
  }

  async componentDidMount() {
    const videos = await AsyncStorage.getItem('imagensSelecionadas');
    const videosToJson = JSON.parse(videos);
    const videosList = videosToJson.filter((video) => video.mime === 'video/mp4')

    videosList.forEach((video, index) => video.id = index.toString())
    this.setState({
      videos: videosList,
    });

  }

  render() {
    return (
      (this.state.videos.length > 0) &&
      <FlatList
        data={this.state.videos}
        renderItem={({ item }) => <Item key={item.id} name={item.filename} progress={0} />}
        keyExtractor={(item) => item.id}
      />
    )
  }
}

item. js

 class Item extends PureComponent {
  constructor(props) {
    super(props);
  }
  render() {
    const { props } = this;
    return (
      <View style={{flex: 1, width: Dimensions.get("window").width, paddingHorizontal: 10 }}>
        <View style={styles.cardContainer}>
          <View style={styles.thumbnailContainer}>
            <Image source={{ uri: 'https://placeimg.com/640/480/any' }} style={styles.thumbnail} resizeMode='cover' resizeMethod='auto' />
          </View>
          <View style={styles.infoContainer}>
            <Text style={styles.title}>{props.name || 'Novo Video'}</Text>
            <Bar progress={props.progress} width={null} color='#00FF9D' borderRadius={0} borderWidth={0} unfilledColor='#CCCCCC' style={styles.infoBar} />
            <View style={styles.infoHeader}>
              <Text>57 segundos restantes</Text>
              <Text>{(props.progress * 100) || 0}%</Text>
            </View>
            <View style={styles.actionsContainer}>
              <Icon.Button name='pause' backgroundColor='transparent' color='#CCC' onPress={() => startUpload()}>
                <Text>PAUSAR</Text>
              </Icon.Button>
              <Icon.Button name='times-circle' backgroundColor='transparent' color='#CCC' >
                <Text>CANCELAR</Text>
              </Icon.Button>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

Это содержимое моего this.state.videos 

[
  {
    filename: "IMG_0011.MP4",
    hashId: "1eddbd20-aff8-11ea-b8fc-1b40f658f9c6",
    id: "0",
    isVideoYoutube: false,
    mime: "video/mp4",
    path: "file:///.../2C37F3A6-0A53-4224-9AFE-E36ECD916344.mp4",
    size: 212487,
  },
  {
    filename: "IMG_0011.MP4",
    hashId: "1eddbd20-aff8-11ea-b8fc-1b40f658f9c6",
    id: "1",
    isVideoYoutube: false,
    mime: "video/mp4",
    path: "file:///.../2C37F3A6-0A53-4224-9AFE-E36ECD916344.mp4",
    size: 212487,
  },
]

Обратите внимание, сколько раз вызывается мой компонент

Что вызывает эту проблему при рендеринге мой компонент

РЕДАКТИРОВАТЬ: я добавил весь кодовый лист, чтобы упростить понимание

...