Question

我在react native中创建了一个简单的FlatList以获取赌注列表。当刷新请求有效时，它没有重新呈现FlatList。然后，我了解了extraData道具，但是将this.state.refreshing甚至this.state传递给它并不会触发FlatList的重新呈现。这似乎只是一个Android问题，因为人们报告说它可以在iOS上运行，但我仍然没有针对此问题的解决方案。

class BetList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bets: [],
            refreshing: false
        };
    }

    async componentDidMount() {
        this._loadBetList();
    }

    _loadBetList() {
        console.log("Fetching...");
        Api.getAllBets().then((res) => {
            res = res.map((item) => {
                return ({key: item.id + ""});
            });
            this.setState({bets: res});
        });
    }

    _onRefresh() {
        console.log("Refreshing...");
        this.setState({refreshing: true}, () => this._loadBetList());
        this.setState( {refreshing: false} );
    }

    render() {
        const { bets } = this.state;

        return (
            <View>
                <FlatList
                    data={bets}
                    extraData={this.state}
                    renderItem={({item}) =>
                        <BetListItem id={item.key}/>
                    }
                    refreshing={this.state.refreshing}
                    onRefresh={() => this._onRefresh()}
                />
                <ResetAnswersButtonComponent/>
            </View>
        );
    }
}

export default BetList;

Answer 1

首先将键添加到renderItem方法返回的组件中

ex

<BetListItem id={item.key} key = {item.key}/>

也

onRefresh和loadMore函数可以如下修改

_loadBetList() {
        console.log("Fetching...");
        Api.getAllBets().then((res) => {
            res = res.map((item) => {
                return ({key: item.id + ""});
            });
            this.setState({bets: res,refreshing : false});
        });
    }     

_onRefresh() {
        console.log("Refreshing...");
        this.setState({refreshing: true}, () => this._loadBetList());
    }

Answer 2

这对您有用吗？我从未见过在状态下执行过函数...

_onRefresh() {
        console.log("Refreshing...");
        this.setState({refreshing: true}, () => this._loadBetList());
        this.setState( {refreshing: false} );
    }

尝试将其更改为

_onRefresh() {
        console.log("Refreshing...");
        this.setState({refreshing: true});
        this._loadBetList();
        this.setState( {refreshing: false} );
    }

哦，由于某些原因，componentDidMount是异步的，但是您在任何地方都没有使用await关键字...将_loadBetList和_onRefresh（）更改为async，并保持componentDidMound同步。

componentDidMount() {
        this._loadBetList();
    }

    async _loadBetList() {
        console.log("Fetching...");
        var res = await Api.getAllBets()
        res = res.map((item) => {
                return ({key: item.id + ""});
            });
        this.setState({bets: res})
    }

    async _onRefresh() {
        console.log("Refreshing...");
        this.setState({refreshing: true});
        await this._loadBetList()
        this.setState( {refreshing: false} );
    }

FlatList不重新呈现

2 个答案: