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函数中为prop赋值。创建单独的操作来处理获取数据。

例如：

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

您应该对组件具有状态，并在其中应用所需的更改。通过获取数据更改状态后，组件将重新呈现并显示新数据。

在使用本机Redux上拉时刷新FlatList

3 个答案: