使用 react native redux 刷新 FlatList

Question

我正在尝试使用 react-native redux 刷新 FlatList 数据。 在拉取 FlatList 数据时，加载图标会出现和消失，但列表没有显示我对数据库所做的任何更新。

代码如下：

    class flatRedux extends Component {

        componentWillMount() {
            this.props.listShow();
        }
        onRefresh = () => { 
               this.props.loading = true,
               this.props.flatlist= [],

                () => {  
                      this.props.listShow();                      
                  }         
        }

        render() {
            if (this.props.loading) {
                return <Spinner size="large" />;
            }
            return (
                <View style={styles.MainContainer}>
                    <SearchBox
                        placeholder="Search..."
                        onChangeText={this._onSearchChange}
                    />
                    <FlatList
                        onRefresh={() => this.onRefresh()}
                        refreshing={this.props.loading}
                        data={this.props.flatlist}
                        extraData={this.props}
                        ItemSeparatorComponent={this.FlatListItemSeparator}

                        keyExtractor={(item, index) => index.toString()}

                        renderItem={({ item }) =>
                            <Text key={item.id} style={styles.FlatListItemStyle} >
                                {item.cl_name} {'\n'} {item.check} </Text>}

                       />
                </View>
            );
        }
    }
    const mapStateToProps = state => {
        return {
            flatlist: state.listShow.flatlist,
            loading: state.listShow.loading
        };
    };
    export default connect(mapStateToProps, { listShow, searchResult, searchShow })(flatRedux);

这是Reducer的代码：

import {FLAT_DATA } from '../actions/types';

const INITIAL_STATE = {
    flatlist: [],
    loading: true
};
export default (state = INITIAL_STATE, action) => {
   console.log(action);
    switch (action.type) {
        case FLAT_DATA:
            return { ...state, flatlist: action.payload, loading: false };
        default:
            return state;
    }

};

Answer 1

不要在 onRefresh 函数中为 props 赋值。创建单独的操作来处理获取数据。

例如：

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case FETCHING_FLAT_DATA:
            return { ...state, flatlist: [], loading: true };
        case FETCHING_FLAT_DATA_SUCCESS:
            return { ...state, flatlist: action.payload, loading: false };
        default:
            return state;
    }
}

如果您需要更多帮助Check this example。

Answer 2

您是否尝试过使用 RefreshControl？

<View style={styles.MainContainer}>
    <SearchBox
        placeholder="Search..."
        onChangeText={this._onSearchChange}
    />
    <FlatList
        refreshControl={
          <RefreshControl
            refreshing={this.props.loading}
            onRefresh={this.onRefresh.bind(this)}
          />
        }
        data={this.props.flatlist}
        extraData={this.props}
        ItemSeparatorComponent={this.FlatListItemSeparator}

        keyExtractor={(item, index) => index.toString()}

        renderItem={({ item }) =>
            <Text key={item.id} style={styles.FlatListItemStyle} >
                {item.cl_name} {'\n'} {item.check} </Text>}

       />
</View>

当我使用onRefresh时，我也看到有几个人在使用它时遇到问题，我最终使用了这个！

还没有测试剪断，希望这有效！

Answer 3

您应该拥有组件的状态并在其中应用您想要的更改。当您的数据获取更改状态时，组件将重新渲染并显示新数据。