在 React 中映射对象数组时出现错误答案

【问题标题】：An error comes when mapping array of objects in React在 React 中映射对象数组时出现错误
【发布时间】：2021-10-12 00:13:06
【问题描述】：

我尝试从后端获取数据并在前端显示该数据。这是我为完成这项任务而编写的代码。

function ViewPost() {

    const { id } = useParams();
    console.log(id);

    const [posts, setPosts] = useState({});

    useEffect(()=>{
        getOnePost();
    }, []);

    useEffect(()=>{
        if (posts && posts.location) {
            console.log(posts.location);
            console.log(posts.location.longitude);
            console.log(posts.location.latitude);
        }
    }, [posts]);

    const getOnePost = async () => {
        try {
            const response = await axios.get(`/buyerGetOnePost/${id}`)
            console.log(response);
            const allPost=response.data.onePost;
            setPosts(allPost);
        } catch (error) {
            console.error(`Error: ${error}`)
        }
    }
    console.log(posts);

    console.log(posts.wasteItemList);
    return(
        <div className="posts-b">
            <div className="posts__container-b">
                <h1>Post Details</h1>
                <main className="grid-b">
                    {posts.wasteItemList.map((notes,index)=>(
                    <article>
                        <div className="text-b">
                            <h3>Post ID: {index+1}</h3>
                            <p>Waste Item: Polythene Roll</p>
                            <p>Quantity: 1 kg</p>
                        </div>
                    </article>
                    ))}
                </main>
            </div>
        </div>
    );
}
export default ViewPost;

当我使用 console.log(posts) 时，它会成功显示发布数据。 wasteItemList 是一个数组，它有两个对象。

当我 console.log(posts.wasteItemList) 它也成功地显示了两个对象数组。

但是当我尝试映射wasteItemList 时问题就来了。我尝试使用 thisposts.wasteItemList.map 进行映射。但我收到错误“TypeError：无法读取未定义的属性“地图”。我该如何解决这个问题？

【问题讨论】：

在尝试使用.map() 之前检查posts.wasteItemList 是否已定义。当您的组件最初安装和渲染时，posts 是一个没有 wasteitemList 属性的空对象（由您的初始状态 {} 定义）。所以尝试在上面使用.map() 会抛出错误
这能回答你的问题吗？ Cannot read property 'map' of undefined in React

标签： reactjs

【解决方案1】：

发生这种情况是因为数据无法立即获得，所以有一段时间 posts.wasteItemList 未定义。

无论何时访问wasteItemList，您都应该使用 posts && posts.wasteItemList && posts.wasteItemList.map(()=> *)

这为您提供了完全的安全性。

如果您使用的是 TypeScript 或节点版本 >= 14，那么您可以使用optional chaining。 posts?.wasteItemList?.map(()=>{}) 这基本上是一样的，只是在语法上更令人愉悦。

【讨论】：

【解决方案2】：

更改此特定行

 {posts.wasteItemList.map((notes,index)=>

到

 {posts.wasteItemList && posts.wasteItemList.map((notes,index)=>

【讨论】：

【解决方案3】：

posts 的初始值为{}，因此帖子上没有wasteItemList 属性。

尝试访问posts.wasteItemList 将返回undefined，并且您无法映射undefined。

尝试在posts?.wasteItemList?.map 上使用optional chaining

return(
    <div className="posts-b">
        <div className="posts__container-b">
            <h1>Post Details</h1>
            <main className="grid-b">
                {posts?.wasteItemList?.map((notes,index)=>(
                <article>
                    <div className="text-b">
                        <h3>Post ID: {index+1}</h3>
                        <p>Waste Item: Polythene Roll</p>
                        <p>Quantity: 1 kg</p>
                    </div>
                </article>
                ))}
            </main>
        </div>
    </div>
);

【讨论】：