Javascript 除阵列外，所有阵列都有反应

我有一个子组件，它可以看到所有道具，但我要映射的阵列除外

react dev工具可查看阵列：

但我得到“无法读取未定义的属性“map”

类头扩展组件{
render（）{
const nav=this.props.data.nav.map（i=>`
`）
返回(
{this.props.data.name}
{this.props.data.tag}

{this.props.data.t1}
{this.props.data.t2}

{
//导航
}

);
}
}

我以以下方式使用

组件：

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

---

类恢复扩展组件{
建造师（道具）{
超级（）；
this.state={header:{}，skills:{}
}
componentDidMount（）{
这是我的国家({
…数据
});
}
render（）{
返回(
);
}
}

你能告诉我这个.props.data.nav是从哪里来的吗？可能在安装组件时，this.props.data或this.props.data.nav未定义。React-dev工具显示该数组，因为在错误发生后，this.props.data.nav已设置且未定义。尝试以下方法：

var-nav=null；
if（this.props.data！=未定义&&this.props.data.nav！=未定义）{
nav=this.props.data.nav.map（i=>“
”）
}

你能告诉我这个.props.data.nav是从哪里来的吗？可能在安装组件时，this.props.data或this.props.data.nav未定义。React-dev工具显示该数组，因为在错误发生后，this.props.data.nav已设置且未定义。尝试以下方法：

var-nav=null；
if（this.props.data！=未定义&&this.props.data.nav！=未定义）{
nav=this.props.data.nav.map（i=>“
”）
}

您得到的映射未定义，因为您没有得到数组。不能映射未定义的对象。如果我还没有道具，我会得到一个空阵列。这样，您仍然可以映射到它，但不接收任何元素

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

类头扩展组件{
render（）{
const navData=this.props.data&&this.props.data.nav | |【】
const nav=navData.map（i=>`
`）
返回(
{this.props.data.name}
{this.props.data.tag}

{this.props.data.t1}
{this.props.data.t2}

{
//导航
}

);
}
}

或者你也可以从父母那里处理这个问题

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

类父级扩展组件{
render（）{
返回(
)
}
}
类头扩展组件{
render（）{
const nav=this.props.nav.map（i=>`
`）
返回(
{this.props.data.name}
{this.props.data.tag}

{this.props.data.t1}
{this.props.data.t2}

{
//导航
}

);
}
}

您得到的映射未定义，因为您没有得到数组。不能映射未定义的对象。如果我还没有道具，我会得到一个空阵列。这样，您仍然可以映射到它，但不接收任何元素

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

类头扩展组件{
render（）{
const navData=this.props.data&&this.props.data.nav | |【】
const nav=navData.map（i=>`
`）
返回(
{this.props.data.name}
{this.props.data.tag}

{this.props.data.t1}
{this.props.data.t2}

{
//导航
}

);
}
}

或者你也可以从父母那里处理这个问题

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

类父级扩展组件{
render（）{
返回(
)
}
}
类头扩展组件{
render（）{
const nav=this.props.nav.map（i=>`
`）
返回(
{this.props.data.name}
{this.props.data.tag}

{this.props.data.t1}
{this.props.data.t2}

{
//导航
}

);
}
}

您应该检查是否定义了

props.data

，以及

props.data.nav

是否是一个数组，以解决错误

需要执行此检查的原因是

组件的第一次

渲染（）

期间不存在

props.data.nav

。这是因为

nav

数据只有在调用

中的

componentDidMount（）

钩子后才可用（这发生在

的第一次渲染之后）

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

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

类头扩展组件{
//[更新]添加助手方法以简化对data.nav阵列的更安全访问
getNavItems（）{
//如果没有数据，则返回空数组
如果（！this.props.data）返回[]；
//如果导航不是数组，则返回空数组
如果（！Array.isArray（this.props.data.nav））revturn[]；
//安全访问/返回导航阵列
返回this.props.data.nav；
}
render（）{
//[更新]使用本地帮助程序getNavItems方法安全访问项目数组
const nav=this.getNavItems（）.map（i=>`
`）
返回(
{this.props.data.name}
{this.props.data.tag}

{this.props.data.t1}
{this.props.data.t2}