React.js V18报错：无法读取未定义的属性

你遇到的Can't read property of undefined错误，核心原因是部分场景下HeaderContainer未接收到buttonToLink或buttonToText props，导致访问对应属性时触发未定义报错。以下是具体排查和解决方法：

1. 给props设置默认值兜底 #

直接在组件参数解构时为这两个props设置默认值，确保即使未传递参数也不会出现undefined：

export function HeaderContainer({children, buttonToLink = '', buttonToText = '', ...restpros}) {
  console.log(buttonToLink, buttonToText)
  return (
    <Header>
        <Header.Frame>
            <Header.Logo to={'/'} src={Logo} alt={'NetFlix'} />
            <Header.ButtonLink to={buttonToLink} >
              <p>{buttonToText}</p>
            </Header.ButtonLink>
        </Header.Frame>
        {children}
    </Header>
  )
}

也可以通过defaultProps定义全局默认值：

export function HeaderContainer({children , ...restpros}) {
  const { buttonToLink, buttonToText } = restpros;
  console.log(buttonToLink, buttonToText)
  return (
    <Header>
        <Header.Frame>
            <Header.Logo to={'/'} src={Logo} alt={'NetFlix'} />
            <Header.ButtonLink to={buttonToLink} >
              <p>{buttonToText}</p>
            </Header.ButtonLink>
        </Header.Frame>
        {children}
    </Header>
  )
}

HeaderContainer.defaultProps = {
  buttonToLink: '',
  buttonToText: ''
}

2. 检查所有HeaderContainer的调用场景 #

确认项目中所有使用HeaderContainer的地方，是否都传递了buttonToLink和buttonToText props。比如某些路由页面可能直接使用<HeaderContainer>而未传这两个参数，这就会触发报错。

3. 确认剩余参数拼写一致性 #

检查代码中所有使用restpros的地方拼写是否完全一致，避免因拼写错误（比如误写成restProps）导致访问undefined。

另外，你可以查看浏览器控制台的错误详情，明确是哪个属性触发了undefined，这样能更精准定位问题。

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