javascript - React 看到除数组之外的所有内容

Question

我有一个子组件，它可以看到所有 Prop ，但我试图映射一个数组。

react 开发工具看到数组:

但我得到“无法读取未定义的属性‘映射’”

class Header extends Component {
  render() {
    const nav = this.props.data.nav.map(i => `<li><a href="#${i}">${i}</a></li>`)
    return (
      <div className="header">
        <div className="left">
          <h1>{this.props.data.name}</h1>
          <p>{this.props.data.tag}</p>
        </div>
        <div className="right">
          <h2>{this.props.data.t1}</h2>
          <h3>{this.props.data.t2}</h3>
        </div>
        <div className="header-contact">
          <a rel="noopener" href="tel:+14156943568">
          <FontAwesomeIcon icon={faPhone} /> {this.props.data.phone} 
          </a>
          <a rel="noopener" href="mailto:tim.smith.hdg@gmail.com">
          <FontAwesomeIcon icon="at" /> {this.props.data.email}
          </a>
        </div>
        <nav id="nav" className='nav'>
          <ul>
            {
              //nav
            }
          </ul>
        </nav>
      </div>
    );
  }
}

我正在使用<Header />组件的方式如下:

class Resume extends Component {
  constructor(props) {
    super();
    this.state = { header: {}, skills: {} }
  }
  componentDidMount() {
    this.setState({
        ...data
    });
  }
  render() {
    return (
      <div className="resume">
        <Header data={this.state.header} />
        <Skills data={this.state.skills} />
      </div>
    );
  }
}

Answer 1

您应该检查 props.data已定义，并且 props.data.nav是一个数组，用于解决错误。

您需要执行此检查的原因是 props.data.nav在第一个 render() 期间不存在<Header />的成分。这是因为nav数据仅在 componentDidMount() 之后可用 Hook <Resume />被调用(在第一次渲染 <Header /> 之后发生)

您可以进行以下调整来解决此问题:

class Header extends Component {

  // [UPDATE] add helper method to simplify safer access to data.nav array
  getNavItems() {

      // If no data, return empty array
      if(!this.props.data) return [];

      // If nav not an array, return empty array
      if(!Array.isArray(this.props.data.nav)) revturn [];

      // Safely access/return nav array
      return this.props.data.nav;
  }

  render() {

    // [UPDATE] use local helper getNavItems method to safely access item array
    const nav = this.getNavItems().map(i => `<li><a href="#${i}">${i}</a></li>`)
    return (
      <div className="header">
        <div className="left">
          <h1>{this.props.data.name}</h1>
          <p>{this.props.data.tag}</p>
        </div>
        <div className="right">
          <h2>{this.props.data.t1}</h2>
          <h3>{this.props.data.t2}</h3>
        </div>
        <div className="header-contact">
          <a rel="noopener" href="tel:+14156943568">
          <FontAwesomeIcon icon={faPhone} /> {this.props.data.phone} 
          </a>
          <a rel="noopener" href="mailto:tim.smith.hdg@gmail.com">
          <FontAwesomeIcon icon="at" /> {this.props.data.email}
          </a>
        </div>
        <nav id="nav" className='nav'>
          <ul>
            {
              //nav
            }
          </ul>
        </nav>
      </div>
    );
  }
}