错误。当更新状态时，'Promise<PostInfo>[]'类型不可分配给'PostInfo[]'类型？

Question

目前，我有一个获取API和更新状态的函数，但当我把Promise分配给状态时，它显示错误。

type DataState = {
   postList: Array<PostInfo>:
};

const [state, setState] = useState<DataState>({ postList: [] });
const handleClick = (postID: number) => {
    const newPostsList = state.postList.map(async post => {
        if (post.id === postID) {
            const likeType = post.myLike
                ? ReactionType.NoReaction
                : ReactionType.ThumbsUp;
            const response = await putLike(postID, likeType); // fetch API

            if (typeof response !== 'string') {
                return {
                    ...post,
                    myLike: !post.myLike,
                    reactionCount: post.myLike
                        ? post.reactionCount - 1
                        : post.reactionCount + 1,
                };
            }

            return post;
        }

        return post;
    });
    setState({
        postList: newPostsList, // error here
    });
}

我可以通过使用 for 襻

const handleClick = async (postID: number) => {
    const posts = state.postList;
    const newPostsList = [];
    for (let i = 0; i < posts.length; i++) {
        if (posts[i].id == postID) {
            const likeType = posts[i].myLike
                ? ReactionType.NoReaction
                : ReactionType.ThumbsUp;
            const response = await putLike(postID, likeType); // fetch API
            if (typeof response !== 'string') {
                newPostsList.push({
                    ...posts[i],
                    myLike: !posts[i].myLike,
                    reactionCount: posts[i].myLike
                        ? posts[i].reactionCount - 1
                        : posts[i].reactionCount + 1,
                });
            } else {
                newPostsList.push(posts[i]);
                alert(response);
            }
        } else {
            newPostsList.push(posts[i]);
        }
    }
    setState({
        postList: newPostsList,
    });
}

我如何解决这个问题，但仍然使用 map 谢谢你的阅读

Answer 1

错误是真的，因为你把一个异步数组放到了一个同步数组中，所以我建议你在每次迭代得到响应后，马上推送每个列表，如下图。

type DataState = {
   postList: Array<PostInfo>:
};

const [state, setState] = useState<DataState>({ postList: [] });
const handleClick = (postID: number) => {
    state.postList.forEach(async post => {
        if (post.id === postID) {
            const likeType = post.myLike
                ? ReactionType.NoReaction
                : ReactionType.ThumbsUp;
            const response = await putLike(postID, likeType); // fetch API

            if (typeof response !== 'string') {
                setState(prevState => prevState.concat([{
                    ...post,
                    myLike: !post.myLike,
                    reactionCount: post.myLike
                        ? post.reactionCount - 1
                        : post.reactionCount + 1,
                }]));
            }

            return post;
        }

        return post;
    });
}