FlatList не рендеринг

Question

Я сделал простой 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

Это работает для вас? Я никогда не видел функцию, выполняющуюся в состоянии ...

_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} );
    }

Answer 2

Сначала добавьте ключ к компоненту, который возвращает метод renderItem

ех

<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());
    }