代码之家 › 专栏 › 技术社区 › Tithos

除了在阵列上,其他都看到了

reactjs javascript

Tithos · 技术社区 · 6 年前

我有一个子组件,它可以看到所有道具,但只有一个数组是我要映射的。

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>
    );
  }
}

3 回复 | 直到 6 年前

Dacre Denny 6 年前

你应该检查一下 props.data props.data.nav 是一个数组,用于解决错误。

您需要执行此检查的原因是在第一次测试中不存在 render() <Header /> 组件。这是因为 nav 数据只有在 componentDidMount() <Resume /> <标题/> )

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>
    );
  }
}

Pedro Simão 6 年前

你能从哪里看出来吗 this.props.data.nav 来自哪里?也许当组件安装好的时候,此.props.data或者此.props.data.nav未定义。React dev工具显示数组,因为在错误之后,此.props.data.nav已设置且未定义。尝试以下操作:

var nav = null; if(this.props.data != undefined && this.props.data.nav != undefined){ nav = this.props.data.nav.map(i => "<li><a href="#${i}">${i}</a></li>") }

EQuimper 6 年前

class Header extends Component {
  render() {
    const navData = this.props.data && this.props.data.nav || []
    const nav = navData.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>
    );
  }
}

或者你也可以从父母那里处理这个案子

class Parent extends Component {
  render() {
    return (
      <div>
        <Header data={this.state.header} nav={this.state.header && this.state.header.nav || []} /> 
      </div>
    )
  }
}


class Header extends Component {
  render() {
    const nav = this.props.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>
    );
  }
}