React JSX中无法访问嵌套JSON对象问题求助

嘿，我明白你遇到的麻烦了——明明在useEffect里能正常拿到接口返回的JSON数据，设置状态后渲染JSX却老是报嵌套属性undefined的错，拆分状态又太啰嗦。别担心，这其实是React状态初始化和嵌套属性访问时的常见问题，咱们一步步解决它。

问题根源 #

大概率是你的UserProfile初始状态设置的是空对象{}，或者虽然初始是null/undefined，但嵌套属性访问时没有做足够的空值检查：

• 如果初始状态是{}，那么外层的UserProfile? <div>...</div> : <h1>Loading</h1>会把空对象判定为“真值”，直接进入渲染逻辑，但此时UserProfile.user、UserProfile.posts还没被接口数据填充，自然会抛出undefined错误。
• 就算初始状态是null/undefined，直接访问UserProfile.posts.length这种深层嵌套属性时，只要中间某一层是undefined，就会触发报错。

简洁的解决方案：可选链+空值合并 #

我们可以用ES6+的**可选链操作符?.和空值合并运算符??**来解决，不用拆分大量状态变量，代码还更简洁。

步骤1：修正初始状态 #

首先确保UserProfile的初始状态是null或者undefined（这样外层的加载判断才会生效）：

const [UserProfile, setProfile] = useState(null);

步骤2：修改渲染代码中的属性访问 #

把所有嵌套属性的访问都加上?.，同时用??来设置默认值（比||更严谨，只会在值为null/undefined时生效）：

return ( <>
  { UserProfile ? (
    <div style={{maxWidth:'800px',margin:"0px auto"}}>
      <div style={{ display:"flex", justifyContent:'space-around', margin:"18px 0px" }}>
        <div>
          <img style={{borderBottom:"1px solid grey",width:"160px",height:"160px",borderRadius:"80px"}} src="https://images.unsplash.com/photo-1569466896818-335b1bedfcce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"/>
        </div>
        <div>
          <h4>{UserProfile?.user?.name ?? "Loading..."}</h4>
          <div style={{display:"flex",justifyContent:"space-between",width:"100%"}}>
            <h6>{UserProfile?.posts?.length ?? 0} posts &nbsp;</h6>
            <button onClick={()=>followUser()} className="btn waves-effect waves-light #64b5f6 blue lighten-2" type="button" name="action">Follow</button>
          </div>
        </div>
      </div>
      <div className="gallery">
        { UserProfile?.posts?.map((item)=>{
          return(
            <img className="item" key={item._id} src={item.photo}/>
          )
        }) ?? [] }
      </div>
    </div>
  ) : <h1>Loading...</h1> }
</> )

为什么这样管用？ #

• UserProfile?.user?.name：如果UserProfile是null/undefined，或者UserProfile.user是null/undefined，整个表达式会返回undefined，不会继续访问下一层属性，也就不会报错。
• ?? "Loading..."：当前面的表达式返回undefined/null时，就显示"Loading..."，否则显示真实的用户名。
• UserProfile?.posts?.map(...) ?? []：如果posts不存在，就用空数组替代，避免map调用在undefined上。

额外方案：嵌套条件渲染 #

如果你不想用ES6+的新语法（虽然推荐用），也可以用嵌套的条件判断来做：

<h4>{UserProfile && UserProfile.user ? UserProfile.user.name : "Loading..."}</h4>
<h6>{UserProfile && UserProfile.posts ? UserProfile.posts.length : 0} posts &nbsp;</h6>
{ UserProfile && UserProfile.posts ? UserProfile.posts.map(...) : [] }

不过这种写法比可选链要繁琐一些，所以还是推荐前面的方案。

这样修改后，你就不用创建一堆零散的状态变量，代码保持简洁的同时，也彻底解决了渲染时的undefined错误～

内容的提问来源于stack exchange，提问作者Ron S