错误：更新状态时，类型“Promise<PostInfo>[]”不可分配给类型“PostInfo[]”？答案

【问题标题】：Error: Type 'Promise<PostInfo>[]' is not assignable to type 'PostInfo[]' when update state?错误：更新状态时，类型“Promise<PostInfo>[]”不可分配给类型“PostInfo[]”？
【发布时间】：2020-08-11 22:53:03
【问题描述】：

目前，我有一个获取 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？感谢您的阅读！

【问题讨论】：

标签： javascript reactjs typescript promise es6-promise

【解决方案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;
    });
}

【讨论】：