Реагировать на родной FlatList не рендеринг при обновлении данных

Question

У меня проблема с тем, что мой FlatList не отображает элемент, к которому я его обращаюсь. Эти данные, которые я использую для визуализации списка, успешно доступны в моем хранилище Redux, и я увлажняю хранилище в componentDidMount того же компонента, в котором я отображаю свой FlatList. Я замечаю, что компонент дважды обращается к методу рендеринга, однако у него все еще нет данных к тому времени, когда он должен предоставить их в команду renderItem.

Я установил отладчик в свой CardBuilder и заметил, что он срабатывает один раз для каждого элемента в первый раз, однако, поскольку this.props.picskit не определен, он не будет отображаться. Это никогда не попадет во второй раз, даже если в родительском элементе picskitz были увлажнены в магазине и доступны. Как я могу попросить мой FlatList снова попытаться выполнить рендеринг с исходным источником данных? В конце концов я хочу добавить к этому бесконечную прокрутку, но сейчас я просто пытаюсь получить первые 25 значений (на одной странице), по крайней мере, для визуализации. Любая помощь с благодарностью.

Вот мой компонентDidMount:

componentDidMount(){
    const { dispatch, user, token, history } = this.props
    const { pageNumber } = this.state
    const LOGIN = 'LOGIN'
    if ( token && user ){
      dispatch({ type: LOGIN, user: {user, token} })
      dispatch(getAllPicskitz(pageNumber, token, history))
    } else {
        dispatch(getAllPicskitz(pageNumber, user.token, history))
    }
  }

Вот мой FlatList:

 keyExtractor = ( picskit, index) => picskit.id.toString()

  render(){
    const { picskitz } = this.props

    return(
      <View style={styles.container}>
        <View style={styles.headerContainer}>
          <Image
            source={ require('../media/logo-with-color.png')}
          />
        </View>
        <FlatList
          data={picskitz}
          renderItem={ ({picskit}) => <CardBuilder picskit={picskit} /> }
          keyExtractor={this.keyExtractor}
        />
        <LowerNavBar />
      </View>
    )
  }

И, наконец, вот компонент "CardBuilder", который я пытаюсь визуализировать:

  render(){
    const {picskit} = this.props
      if ( picskit !== undefined ){
        return (
          <View style={styles.container}>
            <View style={styles.headerContainer}>
              <View style={styles.titleContainer}>
                <Text style={styles.titleText}> {picskit.title} </Text>
              </View>
              <View style={styles.detailsContainer}>
                <View style={styles.viewsContainer}>
                  <Image
                    source={ require('../media/icon-glasses.png')}
                  />
                  <Text> {picskit.views} </Text>
                </View>
                <Text style={styles.detailsText}> {picskit.owner.name} </Text>
              </View>
            </View>

            <ImageBackground 
              source={{uri: JSON.parse(picskit.content)[0].aws_url}} 
              style={styles.mainImage}
              >
              <Image 
                source={ require('../media/frame-black.png')}
                style={{width: '100%', height: '100%'}} 
              />
            </ImageBackground>
          </View>
        )
      }
    return null
  } 
}

Answer 1

Если изменяется реквизит данных Flatlist, он автоматически перерисовывается. Это означает, что ваши данные не будут успешно переданы из вашего хранилища резервов в ваш компонент. Где бы вы ни брали эти данные из хранилища и передавали их как реквизиты, я начинал бы двойную проверку своего кода и отладку.

Answer 2

вы забыли передать реквизит extraData в свой FlatList

extraData={picskitz}

это то, что предписывает FlatList перерисовываться при изменении значения {picskitz}

Answer 3

Я нашел потенциальный ответ, однако я не уверен, что это самый эффективный или правильный способ сделать это. Во-первых, я добавил условную логику для отображения моего FlatList, только если у меня были данные. Это выглядит так:

{ picskitz ?
    <FlatList
        data={picskitz}
        renderItem={ ({item}) => <CardBuilder item={item} /> }
        keyExtractor={(x, i) => i.toString() }
        onEndReached={this.loadMore}
    />
  :
    null
}

Кроме того, если взглянуть на документы React Native FlatList немного глубже, то оказывается, что в них есть встроенная опора. чтобы справиться с этой условной логикой я написал. Эта опора позволяет отображать другой компонент или выполнять функцию, когда источник данных / список пуст. Вот так выглядит мой обновленный компонент FlatList с условно удаленным. Мой f => f в основном означает: ничего не делать.

  <FlatList
    data={picskitz}
    renderItem={ ({item}) => <CardBuilder item={item} /> }
    listEmptyComponent={ f => f }
    keyExtractor={(x, i) => i.toString() }
    onEndReached={this.loadMore}
  />

Следующее, что я сделал, настроил функцию loadMore для асинхронной работы. Это выглядит так:

  loadMore = () => {
    const { dispatch, user, history } = this.props
    this.setState( 
      state => ({ pageNumber: state.pageNumber + 1 }), async () => 
        await dispatch(getMorePicskitz(this.state.pageNumber, user.token, history))
    )
  }

Вы заметите, что отправка ожидает, убедившись, что данные находятся в хранилище правильно перед повторным вызовом render (), что означает, что FlatList теперь будет иметь полный список из 50 (из предыдущих 25 загруженных) до рендеринг компонента CardBuilder.

Я очень открыт к предложениям, если они есть у кого-либо!