2017-10-15 70 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

你可能想明確指出你改變了什麼。 –

相關問題