时间戳

首页 > 解决方案 > React 道具返回未定义

reactjs - React 道具返回未定义

问题描述

我在 React 中制作了一个导航栏组件，并且传入了一个 JSON 对象和一个简单的字符串作为道具： 

<NavBar links={ navlinks } hello="hello" />;

但是我尝试在我的组件中调用道具，但它们不起作用。

import React, { Component } from 'react'
import './BasicNavBar.css'
import 'font-awesome/css/font-awesome.min.css'


export class NavBar extends Component {
  constructor(props) {
      super(props);
      this.state = {
        hidden: false
      };
  }

 toggleNav = (e) => {
    e.preventDefault();
    this.setState({
      hidden: !this.state.hidden
    });
  };

  render(){
    console.log(this.props.links)
    return(
      <nav className="navbar">
      <span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
        <span className="nav-bar-toggle" id="js-navbar-toggle">
          <i className="fa fa-bars"></i>
        </span>
      </span>
        <a href="#" className="logo"></a>
        <ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
      {
        Object.keys(this.props.links).map(key => {
          <li><a href="#" className="nav-links">{key}</a></li>
        })
      }
      </nav>
    )
  }
}

我试过了this.props.hello，this.props.links他们都回来未定义。我也尝试过返回props，但它返回为空的 JSON 字符串。

标签： reactjs

解决方案

您可以做的是在执行 .map() 之前首先检查 this.props.links 是否为真值。我敢打赌这里发生了一些异步逻辑，我们试图在它被传递之前访问你的道具。

import React, { Component } from 'react'
import './BasicNavBar.css'
import 'font-awesome/css/font-awesome.min.css'


export class NavBar extends Component {
  constructor(props) {
      super(props);
      this.state = {
        hidden: false
      };
  }

 toggleNav = (e) => {
    e.preventDefault();
    this.setState({
      hidden: !this.state.hidden
    });
  };

  render(){
    console.log(this.props.links)
    return(
      <nav className="navbar">
      <span className="nav-bar-toggle" id="js-navbar-toggle" onClick={this.toggleNav} >
        <span className="nav-bar-toggle" id="js-navbar-toggle">
          <i className="fa fa-bars"></i>
        </span>
      </span>
        <a href="#" className="logo"></a>
        <ul id="main-nav" className={ this.state.hidden ? 'active' : 'hidden' }></ul>
      {
         this.props.links ? (
             Object.keys(this.props.links).map(key => {
                return <li><a href="#" className="nav-links">{key}</a></li>
             }) 
         ) : (
            <div></div>
         )
      }
      </nav>
    )
  }
}

推荐阅读