如何在一个地图上做多个请求，并捕获所有的错误与React?

Question

我有一个应用程序，我从用户那里得到一些帖子，然后我把它们每个推到GitHub仓库。然而，我想抓住所有可能来自这张地图的错误。我怎么才能做到呢?当然，目前我的useState正在取代以前的状态，我不确定如何继续。下面是代码:

const [errors, setErrors] = useState<string[]>([])
const triggerPostsBackup = (postsData) => {
posts.map(async (post) => {
try {
await THE_REQUEST
} catch (error) {
const errorString = `${post.title} failed to upload!`
setErrors(errors.concat(errorString))
}
}
}

有什么建议吗?

我还试图设置一个内部变量来保持所有的错误，并在地图结束时，使用useState来创建我的错误状态，但我完全失败了

Answer 1

您可以使用Promise.allSettled捕获每个请求的结果。然后，在所有请求完成后，您可以减少它们，将被拒绝的承诺推入错误数组。最后，调用seterror。

const [errors, setErrors] = useState<string[]>([]);
const triggerPostsBackup = async (postsData) => {
const results = await Promise.allSettled(
posts.map(async (post) => {
await THE_REQUEST;
})
);
const errors = results.reduce<string[]>((acc, next, index) => {
if (next.status === 'rejected') {
acc.push(`${posts[index].title} failed to upload!`);
}
return acc;
}, []);
setErrors(errors);
};

Answer 2

找到了解决我问题的方法。我能够用callback(文档)解决它，它看起来像这样:

const [errors, setErrors] = useState<string[]>([])
const triggerPostsBackup = (postsData) => {
posts.map(async (post) => {
try {
await THE_REQUEST
} catch (error) {
const errorString = `${post.title} failed to upload!`
setErrors((previousState) => [...previousState, errorString])
}
}
}