2017-10-15 74 views
0

这是什么错误的功能,我试图在滚动时淡化Navbar,但它会在下面的函数中引发错误?Meteor + React错误mensage“未定义状态”。

const opacity = Math.min(100/state.alturaActualScroll, 1); 

我有我的导航栏组件,但告诉我,国家并没有被定义,但我不知道是因为错误,这是我的代码

import React from 'react'; 
import {Link} from 'react-router' 
import { Accounts } from 'meteor/accounts-base'; 
import {Meteor} from 'meteor/meteor'; 

export default class NavbarLanding extends 
React.Component { 


    componentDidMount() { 
     window.onscroll =()=> { 
      this.setState({ 
       alturaActualScroll: window.scrollY}) 
     } 
    } 
    componentDidMount() { 
     window.onscroll =()=>{ 
      nuevaAlturaScroll = Math.ceil(window.scrollY/50) *50; 
      if(this.state.alturaActualScroll != nuevaAlturaScroll){ 
       this.setState({alturaActualScroll:nuevaAlturaScroll}) 
      } 
     } 
    } 
     // update 
    render() { 
     // console.log('donde estoy'); 
     const opacity = Math.min(100/state.alturaActualScroll, 1); 
     return(
     <div style={opacity}id="navbar"className="navbar-landing"> 
      <nav> 
       <div> 
         <ul className="ul-landing"> 
           {/* <img src="./public/images/flat-rocket.jpg"></img> */} 
           <li id="navbar-landing-title" className="navbar-title"><a>Landing </a></li> 
          <div id="menu-landing"className="navbar-menu"> 
           <li><a>acerca</a></li> 
           <li><a>portafolio</a></li> 
           <li><a>contacto</a></li> 
           <button className="btn"onClick={() => Accounts.logout()}>Logout</button> 
          </div> 
         </ul> 
       </div> 
      </nav> 
     </div> 
     ); 
    }; 
} 

NavbarLanding.reactProptype = { 
    title: React.PropTypes.string.isRequired 
}; 
+0

那么,状态变量的定义在哪里?另一件事:你有'componentDidMount'定义了两次。 – zerkms

回答

1

你的代码应该是

const opacity = Math.min(100/this.state.alturaActualScroll, 1); 

您在访问组件状态时忘记添加this关键字,这导致解释器查找名为state的局部变量而不是类级别状态变量。

在Felix Kling和zerkms的评论中修改并更正了

+0

你可能想明确指出你改变了什么。 –

相关问题