简体   繁体   中英

Error mensage “state is not defined” in Meteor + React.

Which is wrong with this function, I try to fade the Navbar at the time of scrolling but it throws me an error in the following function?

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

i have my navbar component but tells me that the state has not been defined but I do not know because the error, this is my code

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

Your code should be

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

You forgot to add the this keyword while accessing the state of the component, which led the interpreter to look for a local variable named state instead of the class level state variable.

Edited and corrected after comments from Felix Kling and zerkms

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM