反应-剩余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(成功运行)之后，在FlatList重新呈现之前调用mapStateToProps ()或_refreshData()函数(这也是成功的，但使用旧数据)。那么，在哪里调用_onRefresh()或_refreshData()函数呢？将它们放在render()中会导致无限循环。

Answer 1

您试过使用ComponentDidUpdate react生命周期方法吗？这将在你收到新的道具后触发，你可以打个电话到this._refreshData那里。

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