React组件传参问题求助：Username组件仅显示@符号，Props未生效

问题现象 #

将Username组件传入Comment组件后，页面仅显示@符号，用户名内容未正常显示。

代码错误分析 #

问题出在组件的props传递与接收不匹配：

• Username组件内部期望props.user是一个包含username属性的对象，因此通过props.user.username取值；
• 但Comment组件传递给Username的是字符串类型的props.username（即"guest"），此时props.user是字符串，访问props.user.username会得到undefined，最终只渲染了@符号。

修复方案 #

提供两种可行的修复方式，任选其一即可：

方案1：修改Username组件的接收逻辑 #

直接让Username接收字符串类型的username参数：

// username component
const Username = (props) => {
  return (
    <div>
      <p>@{props.username}</p>
    </div>
  )
};

// Comment组件中调用方式同步修改
const Comment = (props) => {
  return (
    <div>
      <ProfilePicture user={props.image} />
      <Username username={props.username} />
    </div>
  )
}

方案2：调整Comment组件的传递方式 #

保持Username组件原有逻辑，将username包装成符合组件期望的对象结构：

// Comment组件中修改Username的调用
const Comment = (props) => {
  return (
    <div>
      <ProfilePicture user={props.image} />
      <Username user={{ username: props.username }} />
    </div>
  )
}

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