React父组件Mypage向子组件MyProfile传users数据失败排查

问题场景 #

父组件MyPage通过InfoAPI获取用户数据{data: {nickname:xxx, memberId:sss, img:dddd}}，控制台打印res.data正常，但子组件MyProfile无法正常使用该数据，先后出现两个报错：

1. 首次报错：Uncaught TypeError: Cannot destructure property 'users' of '_ref2' as it is undefined.
2. 修改useEffect逻辑后报错：MyProfile.jsx:27 Uncaught TypeError: Cannot read properties of undefined (reading 'nickname')

问题根源 #

1. 初始值类型错误：父组件中const [users, setUsers] = useState("");将users初始化为空字符串，而API返回的是对象，导致子组件首次渲染时users是字符串，无法访问.data属性。
2. 异步数据加载时机问题：API请求是异步的，子组件在父组件获取到数据前就已渲染，此时users还未更新为有效数据，直接访问users.data.nickname会触发未定义报错。
3. useEffect依赖缺失：子组件的useEffect未添加users依赖，导致users更新后，useEffect不会重新执行状态判断逻辑。

修复方案 #

1. 修正父组件users初始值 #

将users初始化为null或空对象，避免类型不匹配：

const [users, setUsers] = useState(null); // 替换原来的空字符串

2. 父组件控制子组件渲染时机 #

在父组件中，只有当users存在时才渲染子组件，避免传递无效数据：

return (
  <LayoutContainer>
    {!users ? (
      <div style={{ paddingTop: '10em', paddingBottom: '10em' }}>
        <Loading />
      </div>
    ) : (
      <>
        <MyInfo memberId={memberId} users={users} />
        <MyProfile memberId={memberId} users={users} />
      </>
    )}
  </LayoutContainer>
);

3. 子组件完善数据校验与依赖 #

• 使用**可选链操作符?.**防止访问未定义属性
• 给useEffect添加users依赖，确保数据更新时重新执行状态判断
• 渲染前先判断数据是否存在

修改后的MyProfile代码：

const MyProfile = ({ users }) => {
  const URL = process.env.REACT_APP_URL;
  const [isAbout, setIsAbout] = useState(false);
  const [isPost, setIsPost] = useState(false);

  useEffect(() => {
    // 先判断users和users.data是否存在
    if (!users?.data) return;
    
    const { nickname, email } = users.data;
    setIsAbout(!!nickname);
    setIsPost(!!email);
  }, [users]); // 添加users依赖

  return (
    <Container>
      <LContent>
        <Stats>
          <div className="title">Stats</div>
          <StatContainer>
            <StatTop>
              <StatDiv>
                <StatNum>1</StatNum>
                <StatMsg>reputation</StatMsg>
              </StatDiv>
              <StatDiv>
                <StatNum>0</StatNum>
                <StatMsg>reached</StatMsg>
              </StatDiv>
            </StatTop>
            <StatBottom>
              <StatDiv>
                <StatNum>0</StatNum>
                <StatMsg>answers</StatMsg>
              </StatDiv>
              <StatDiv>
                <StatNum>0</StatNum>
                <StatMsg>questions</StatMsg>
              </StatDiv>
            </StatBottom>
          </StatContainer>
        </Stats>
      </LContent>
      <RContent>
        <div className="about-container">
          <div className="title">About</div>
          <div className="about-content">
            {isAbout ? (
              <div>{users.data.nickname}</div>
            ) : (
              <>
                <div className="about-txt">
                  Your about me section is currently blank. Would you
                  <br /> like to add one?
                  <Link className="about-link" to="/edit">
                    Edit profile
                  </Link>
                </div>
              </>
            )}
          </div>
        </div>
        <div className="posts-container">
          <div className="title">Posts</div>
          <div className="posts-content">
            {isPost ? (
              <div>{users.data.email}</div>
            ) : (
              <>
                <svg />
                <div className="posts-txt">
                  <p className="posts-txt-top">
                    Just getting started? Try answering a question!
                  </p>
                  Your most helpful questions, answers and tags will appear
                  here. Start by answering a question or selecting tags that
                  match topics you’re interested in.
                </div>
              </>
            )}
          </div>
        </div>
      </RContent>
    </Container>
  );
};

额外优化建议 #

• 可以在子组件中对users做默认值处理，比如const MyProfile = ({ users = {} }) => {...}，避免解构时出现undefined
• 父组件的useEffect依赖数组中添加memberId，确保memberId变化时重新请求数据：useEffect(() => { ... }, [memberId]);

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