reactjs - 在 React 中映射对象数组时出现错误
问题描述
我尝试从后端获取数据并在前端显示该数据。这是我为执行此任务而编写的代码。
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 时问题就来了。我试图用这个来映射posts.wasteItemList.map
。但我收到错误“TypeError:无法读取未定义的属性“地图”。我该如何解决这个问题?
解决方案
发生这种情况是因为数据不能立即可用,所以有一段时间posts.wasteItemList
是未定义的。
每当访问wasteItemList
您应该使用
posts && posts.wasteItemList && posts.wasteItemList.map(()=> *)
这为您提供了完全的安全性。
如果您使用的是 TypeScript 或节点版本 >= 14,那么您可以使用optional chaining
.
posts?.wasteItemList?.map(()=>{})
这基本上是同一件事,只是在语法上更令人愉悦。
推荐阅读
- amazon-web-services - 如何使用 AWS Glue 仅在特定分区上应用作业
- flutter - 在后台使用 googleapis 将文件上传到 google 驱动器 (Flutter)
- javascript - 可编辑表单 ActiveRecord::RecordNotFound(找不到带有 'id'=undefined 的视频)
- python - 如何重塑数据集使其只有一列?
- mongodb - MongoDB聚合:过滤器中的日期比较不起作用
- r - 使用 mlogit R 函数时出错:两个索引未定义唯一观察值
- python - 如何将 groupby 结果分配给 pandas 中的系列
- php - Symfony 5 部署问题(显示空白页面)
- elasticsearch - 在 Elasticsearch 中创建直方图
- php - 带有 Workerman 的 PHP websockets - nginx 配置