Обновление React-Redux FlatList

Question

У меня есть компонент AuditionsList, который отображает FlatList. В другом редукторе я меняю настройки, называемые location и roleType. В зависимости от этих новых настроек я хочу обновить AuditionList.

Вот мой код:

import React from 'react';
import { Text, View, FlatList, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import AuditionItem from './AuditionItem';
import Auditions from './../data/Auditions';

class AuditionsList extends React.Component {

    constructor(props) {
      super(props);
      this.state = { isLoading: true, data: [], refresh: false }
    }

    componentDidMount() {
      this._refreshData();
    }

    _onRefresh() {
      this.setState({ isLoading: true }, this._refreshData() );
    }

    _refreshData = () => {
        Auditions.fetchAuditions(this.props.productionType, this.props.location, this.props.roleType).then(auditions => {
          this.setState({ isLoading: false, data: this._addKeysToAuditions(auditions) });
        });
    }

    _addKeysToAuditions = auditions => {
      return auditions.map(audition => {
          return Object.assign(audition, { key: audition.Role});
      });
    }

    _renderItem = ({ item }) => {
      return (
        <AuditionItem
          auditionId={item.objectId}
          role={item.Role}
          project={item.Project.Name}
          productionType={item.Project.ProductionType.Type}
          auditionDate={JSON.stringify(item.Date.iso)}
          productionHouse={item.Project.ProductionHouse.Name}
        />
      );
    }

    render() {
      console.log("Here...");

      if (this.state.isLoading) {
        return (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        );
      }

      return (
        <View style={{ flex: 1 }}>
          <FlatList onRefresh={() => this._onRefresh()} refreshing={this.state.isLoading} data={this.state.data} renderItem={this._renderItem} />
       </View>
      );
    }

}

const mapStateToProps = state => {
  return {
    location: state.settings.location,
    roleType: state.settings.roleType,
  };
}

export default connect(mapStateToProps)(AuditionsList);

Мне нужно вызывать функцию _onRefresh () или _refreshData () ПОСЛЕ обратного вызова mapStateToProps (который выполняется успешно), но ДО повторного рендеринга FlatList (что также происходит успешно, но со старыми данными). Итак, где я могу вызвать функции _onRefresh () или _refreshData ()? Помещение их в render () вызывает бесконечный цикл.

Answer 1

Вы пытались использовать метод жизненного цикла реагирования ComponentDidUpdate? Это сработает после того, как вы получите новые реквизиты, и вы можете сделать вызов this._refreshData там.

https://reactjs.org/docs/react-component.html#componentdidupdate