Question

我有一个AuditionsList组件，它显示一个FlatList。在不同的化简器中，我正在更改称为位置和角色类型的设置。根据这些新设置，我要刷新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);

我需要在mapStateToProps回调（成功运行）之后但在FlatList重新渲染之前（也成功发生，但使用旧数据）后调用_onRefresh（）或_refreshData（）函数。那么我在哪里调用_onRefresh（）或_refreshData（）函数呢？将它们放入render（）会导致无限循环。

Answer 1

您是否尝试过使用ComponentDidUpdate react生命周期方法？收到新道具后，它将触发，您可以在此调用this._refreshData。

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

React-Redux FlatList更新

1 个答案: