如何使用 React 钩子从分页 API 异步更新变量？

Question

我目前正在尝试从 API 获取对象的所有属性，并将它们显示在表格中。 API 一次最多返回 10 个结果，如果要获取更多结果，将在响应正文中返回值 nextPageToken。我的目标是获取前 10 个结果，立即将它们显示在表格中，并在我继续访问 API 时添加到表格中。这是我第一次尝试解决方案：

const getProperties = async (id) => {
  const properties = await Api.getProperties(id);
  setProperties(properties.properties);
  if (properties.nextPageToken) loadMoreProperties(id, nextPageToken);
};

const loadMoreProperties = async (id, nextPageToken) => {
  const properties = await Api.getProperties(id, nextPageToken);
  setProperties(prevProperties => {return [...prevProperties, properties.properties]});
  if (properties.nextPageToken) loadMoreProperties(id, properties.nextPageToken);
};

（请注意，以上是简化；实际上，getProperties 中有更多逻辑不需要在后续调用 API 时重复）

我在使用此解决方案时遇到的问题是，当我调用 loadMoreProperties 时，setProperties 调用尚未完成。我如何才能强制调用 loadMoreProperties 仅在设置前一组属性后发生？有没有更好的整体模式可以用来解决这个问题？

Answer 1

我认为您应该将回调参数传递给您的“setProperties”方法，以便在值更新后进行第二次调用，如下所示：

 setProperties(properties.properties, () => {
    if (properties.nextPageToken)
        loadMoreProperties(id, nextPageToken);
);

希望对你有帮助