React在三元运算符中无法读取userData报错如何解决

存在的问题 #

• state初始值与赋值错误：你给user状态设置的初始值是空数组，和你预期的null不匹配；另外randomuser.me接口返回的用户数据存放在res.data.results[0]中，你直接把整个res.data赋值给state，拿到的不是用户对象，是完整的响应结构。
• 组件传参错误：给UserSummary传递userData时，你传了字符串'currentUser'，而不是自己定义的user状态变量。
• 渲染逻辑位置错误：你把三元判断逻辑直接写在了UserSummary组件的属性传递区域，这个区域只能写组件props，不能直接插入渲染内容；而且userData是UserSummary的内部props，在App组件中不存在这个变量，必然会报未定义错误。
• 用户属性取值错误：{userData.name, userData.email}是逗号表达式，只会渲染最后一个值userData.email，不能同时渲染两个属性，另外randomuser.me返回的用户姓名是嵌套结构，没有顶层的name字段。
• 子组件无渲染逻辑：UserSummary内部现在返回空div，所有要展示的内容都应该放在这个组件的返回值里。

修复后代码 #

App.jsx #

import {useState, useEffect} from 'react'
import axios from 'axios'
import './App.css'
import UserSummary from './UserSummary.jsx'

function App() {
  // 初始值设为null，匹配你的判断逻辑
  const [user, setUser] = useState(null)

  useEffect(() => {
    async function fetchUser() {
      const currentUser = `https://api.randomuser.me/`
      try {
        const res = await axios.get(currentUser)
        // 取接口返回的第一个用户对象赋值
        setUser(res.data.results[0])
      } catch (error) {
        console.log(error)
      }
    }
    fetchUser()
  }, [])

  return (
    <div className="App">
      <h1>Who's That User?</h1>
      {/* 只需要传递user状态作为userData props即可 */}
      <UserSummary userData={user} />
    </div>
  );
}

export default App;

UserSummary.jsx #

import React from 'react'

// 不需要多余的useState，直接用传入的props即可
function UserSummary({userData}) {
   return (
      <div>
        {/* 渲染逻辑放在子组件内部 */}
        {userData === null ? 
          <h3>There is no user</h3> : 
          <h3>{userData.name.first} {userData.name.last} - {userData.email}</h3>
        }
      </div>
   )
}

export default UserSummary

核心注意点 #

• 组件标签内部的键值对都是props，不能直接插入渲染内容，渲染内容要么放在子组件内部，要么放在组件标签的闭合标签之间作为children传递。
• 组件内部只能访问自身作用域内定义的变量，父组件不能直接访问子组件的props，子组件也不能直接访问父组件的变量，只能通过props传递。

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