时间戳

首页 > 解决方案 > 错误：输入“承诺”[]' 在更新状态时不能分配给类型 'PostInfo[]'？

javascript - 错误：输入“承诺”[]' 在更新状态时不能分配给类型 'PostInfo[]'？

问题描述

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

标签： javascriptreactjstypescriptpromisees6-promise

解决方案

错误是真的，因为您将异步数组放入同步数组中，所以我建议您在每次迭代获得响应后立即推送每个列表，如下所示：

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;
    });
}

推荐阅读