Question

React props 返回未定义

2019-05-11

81

reactjs

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

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

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

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 字符串。

Answer 1

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

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

Answer 2

这么微妙的事情我应该早点发现！

  Object.keys(this.props.links).map(key => {
        <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>
   }
    );

问题是我使用了带有 {} 而不是 () 的箭头函数。

{} 表示语句因此我必须使用 return 而不是只在那里写语句。

我有两种方法可以修复它：

Object.keys(this.props.links).map(key => 
        <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>

    );

或

Object.keys(this.props.links).map(key => {
        return <li><a href="#" className="nav-links">{ this.props.links[key] }</a></li>;
   }
    );

我使用了 () 因为我只有一个语句所以它更干净。

来自 MSDN 的箭头函数：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions