React组件中API嵌套对象取值与Props传递异常：无法显示address和company字段

嘿，我帮你定位到问题啦！你的代码里有两个关键小问题，导致address和company的内容没法正常显示，咱们一步步来修复：

问题1：拼写错误（最容易踩的坑！） #

你把address这个单词写成了adress（少了一个d），不管是父组件传参还是子组件接收、渲染的时候都写错了，这直接导致找不到对应的属性，自然会报错。

问题2：Props传递逻辑错误 #

• 父组件里你只传递了selectedUser.address.street（这是一个字符串值），但子组件却试图访问adress.street——相当于你给子组件递了一根剥好的香蕉果肉，却让它去剥香蕉皮，这肯定不对；
• 同样的，company你传的是selectedUser.company.name（字符串），子组件却想访问company.name，这也是逻辑矛盾。

正确的做法是把整个嵌套对象传递给子组件，而不是单个字段的值，这样子组件就能自由访问对象里的属性了。

修正后的父组件代码 #

return (
  <>
    <header>
      <h1>Users list</h1>
    </header>
    <section>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <button onClick={() => setSelectedUser(user)}>{user.name}</button>
          </li>
        ))}
      </ul>
      {selectedUser && (
        <UserDetail 
          name={selectedUser.name} 
          username={selectedUser.username} 
          email={selectedUser.email} 
          address={selectedUser.address} {/* 修正拼写 + 传递整个address对象 */}
          phone={selectedUser.phone} 
          website={selectedUser.website} {/* 补上之前遗漏的website传参 */}
          company={selectedUser.company} {/* 传递整个company对象 */}
        />
      )}
    </section>
  </>
)

修正后的子组件代码 #

const UserDetail = ({name, username, email, address, phone, website, company}) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{username}</p>
      <p>{email}</p>
      {/* 修正拼写，现在可以正常访问嵌套属性了 */}
      <p>Address: {address.street}, {address.suite}, {address.city} {address.zipcode}</p>
      <p>{phone}</p>
      <p>{website}</p>
      <p>Company: {company.name}</p>
    </div>
  )
}
export default UserDetail

另外，我还帮你补上了父组件里遗漏的website传参，这样子组件里的website也能正常显示啦～

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