如何 return 来自异步函数的闭包并将其分配给 useState？

Question

我正在尝试 return 来自异步函数的函数（闭包）。到目前为止，我拥有事物的方式 space 始终是一个承诺而不是一个函数，即使它应该是一个闭包。

// ...
    const [space, set_space] = React.useState(false);
    React.useEffect(
    () => {
        API.SERVER(query, PAGE_SIZE)
        .then(response => set_space(response));
    },
    [query]
    );

    React.useEffect(
    () => {
        console.log(space.constructor);
        if (space) {
        space(page)
            .then(response => set_titles(Array.from(response.data)));
        }
    },
    [space, page]
    );
// ...

API

// ...
export default {
    SERVER:async function(search, width)
    {
        if (!search) {
        // return () => {};
        search = DEFAULT_QUERY;
    }
    const all = (await axios.get(SEARCH_URL + `?search=${search}`)).data;
    console.log(all);
    const pages = chunk(all, width);
    // function pager(results) {
    //     const dex = (results > width ? results / width : 0);
    //     const next = pages[dex];
    //     return axios.get(SEARCH_URL + `?fromids=${next}`);
    // }
    // return pager;
    return function(results) {
        const dex = (results > width ? results / width : 0);
        const next = pages[dex];
        return axios.get(SEARCH_URL + `?fromids=${next}`);
    };
    // return pager;
}
};

space.constructor说是Promise，但应该是returns axios的Promise的函数，而不是Promise it's self。我无法真正改变 API 的设置方式，因为我需要保留索引客户端，然后通过更改 space 的参数遍历它。

Answer 1

嗯...您只是想要一个随叫随到的功能 return 是您的承诺吗？那useCallback呢？

const triggerAsync = React.useCallback(
    () => {
        return API.SERVER(query, PAGE_SIZE)
        .then(response => set_space(response))
    },
    [query]
    );

triggerAsync 应该 return 当你执行它时一个承诺

Answer 2

问题是，set_space 处理函数的方式与其他值不同。

这是因为 React 的状态设置器可以接受一个回调，该回调接收先前的状态作为参数。

但是，React 无法区分回调和恰好是函数的值。因此，React 将假定它是一个回调并调用它，然后将状态设置为包含其 return 值，另一个 Promise.

要将函数本身置于状态中，您可以创建一个 return 函数的回调，如下所示：

API.SERVER(query, PAGE_SIZE)
.then(response => set_space(() => response));

如何 return 来自异步函数的闭包并将其分配给 useState？

How to return a closure from an async function and assign it to useState?

javascript

async-await

reactjs

API