在 setState 中使用 async-await

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

告诉我错误：

类型参数 '(state: Readonly) => Promise' 不可分配给“AppState |”类型的参数((prevState: Readonly, props: Readonly) => AppState | Pick | null) |选择<...> |空值'。 输入 '(state: Readonly) => Promise' 不可分配给类型 '(prevState: Readonly, props: Readonly) => AppState | Pick |空值'。 键入 'Promise' 不可分配给类型 'AppState | Pick |空值'。 键入 'Promise' 缺少类型 'Pick': 搜索、主题、pageNumts(2345)

如果我在 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

有很多方法可以处理这个问题。我同意这是一个 XY 问题，因为我的建议是重新构建它，这样您就不会遇到这个问题。

推荐：按页面排列的关键门票

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

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

在访问当前页面的门票时，只需查找当前页码的门票数组即可。如果它仍在加载，它将是一个数组 Ticket[] 或 undefined。这是您以前没有的额外信息，因为以前您无法知道您展示的票是当前票还是上一页的剩余票。

另一个好处是，如果用户在页面之间来回切换，您无需重复 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/>
    }
}

Answer 2

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