在setState中使用异步等待

Question

我想进行一个基于当前状态的API调用，但不能使setState函数作为异步函数工作。

    handlePage = (direction: number) => {
    this.setState( async (state) => {
        const tickets: Ticket[] = await api.getTickets(`?page=${state.pageNum + direction}`)
        const pageNum: number = state.pageNum + direction;
        return { pageNum, tickets };
    });
}

给我错误：

类型为“”的参数（状态：只读）=

如果我在setState方法之外获取数据，它会起作用，但我害怕对过时的页码进行API调用：

    handlePage = async (direction: number) => {
    const tickets: Ticket[] = await api.getTickets(`?page=${this.state.pageNum + direction}`)
    this.setState( (state) => {
        const pageNum: number = state.pageNum + direction;
        return { pageNum, tickets };
    });
}

Answer 1

setState只执行作业设置状态（并触发重新渲染：P）；我认为您可以将功能更改为：

handlePage = async (direction: number) => {
    const tickets: Ticket[] = await api.getTickets(`?page=${this.state.pageNum + direction}`);
    
    this.setState({
        pageNum: this.state.pageNum + direction,
        tickets
    })
}

Answer 2

有很多方法可以解决这个问题。我同意这是一个XY问题，因为我的建议是重新构造它，这样你就不会有这个问题。

我的最佳建议是，您所在的州将所有以前加载的页面的票证存储在由页码键入的数组中。

当pageNum更改时，您（有条件地）获取该页的结果。每个响应都知道它在状态中属于哪里，所以在存储它时，这是否仍然是当前页面并不重要。如果pageNum在快速连续更改两次，您将执行两个调用并存储两个结果，但不会混淆哪一个是正确的结果，因为每个结果都与其页码相关联。

访问当前页面的票证时，只需在票证数组中查找当前页码。它将是一个数组票证[]或未定义，如果它仍在加载。这是你以前没有的额外信息，因为之前你不知道你正在展示的票是当前的还是上一页的剩余。

另一个好处是，如果用户在页面之间来回移动，则不需要重复API调用。在获取之前，您可以检查是否已经有该页面的数据。

import React from "react";

interface Ticket {
    // actual properties
}

interface State {
    tickets: Record<number, Ticket[] | undefined>;
    pageNum: number;
}

class MyComponent extends React.Component<{}, State> {
    state: State = {
        tickets: {},
        pageNum: 1,
    }

    handlePage = async (direction: number) => {
        const page = this.state.pageNum + direction;
        // can skip the API call if already loaded!
        if (this.state.tickets[page] !== undefined) {
            return;
        }
        const tickets: Ticket[] = await api.getTickets(`?page=${page}`);
        // we will use the prevState when saving the tickets
        this.setState(prevState => ({
            tickets: {
                ...prevState.tickets,
                [page]: tickets
            }
        }));
    }

    render() {
        // get the tickets for the current page
        const tickets = this.state.tickets[this.state.pageNum] ?? [];
        // might also want to distinguish between an empty result and an incomplete fetch
        const isLoading = this.state.tickets[this.state.pageNum] === undefined;

        return <div/>
    }
}