React中对象属性数据绑定失效问题求助

嘿，我一眼就看出问题所在啦——你在代码里修改了嵌套对象的键名，但渲染的时候还在沿用原来的键，这可不就找不到数据报错了嘛！咱们来拆解下：

问题根源 #

你在useEffect里做了这么一件事：遍历posts["post-meta-fields"]的所有键，把每个键开头的下划线去掉（比如_bg_sales_home变成了bg_sales_home），然后把修改后的键值对存入tempObj，最后替换掉了原有的posts["post-meta-fields"]。

但你渲染的时候还是写的：

<div class="banner_title DrukFont">{posts["post-meta-fields"]["_bg_sales_home"][0]}</div>

这时候posts["post-meta-fields"]里已经没有_bg_sales_home这个键了，自然会抛出找不到属性的错误。

两种解决方案 #

方案1：渲染时使用修改后的键名

既然你已经把键名的下划线去掉了，那渲染的时候就用修改后的键：

<div class="banner_title DrukFont">{posts["post-meta-fields"]["bg_sales_home"][0]}</div>

方案2：保留原键名，去掉键名替换逻辑

如果你不想改渲染代码，那直接删掉useEffect里的键名替换部分就行：

useEffect(() => {
 axios
 .get('https://bodyshop.r2.software/wp-json/wp/v2/pages/2')
 .then(response => {
 const posts = response.data;
 // 移除键名替换的逻辑，直接保留原结构
 setList(posts)
 console.log(posts);
 })
}, [])

额外注意：避免初始状态报错 #

另外，还要注意组件初始渲染时posts可能是undefined，建议加个条件判断或者可选链操作符来避免报错：

// 条件渲染
{posts && posts["post-meta-fields"] && (
  <div class="banner_title DrukFont">{posts["post-meta-fields"]["bg_sales_home"][0]}</div>
)}

// 或者用可选链
<div class="banner_title DrukFont">{posts?.["post-meta-fields"]?.["bg_sales_home"]?.[0]}</div>

内容的提问来源于stack exchange，提问作者Vitalik Hamash