反应状态组件-无法读取未定义的属性“状态”

Question

I have the following problem - I can't read value from my state, I get the error:

Cannot read property 'state' of undefined

My class component with a state:

class SideNav extends Component {

    state = {
        brand: 'Thule'
    }

    handleToggle = () => this.setState({open: !this.state.open});



    handleBrand = (evt) => {
        this.setState({brand: evt.target.value});
        console.log(this.state.brand); --> WORKS HERE!!!
    }

    searchProducts() {
        console.log(this.state.brand); --> ERROR: cannot read 'state' property of undefined
    }

    render() {
        return (
            <div className={classes.sideNav}>
                <Button variant={"outlined"} onClick={this.handleToggle} className={classes.sideNavBtn}>Search</Button>
                <Drawer
                    className={classes.drawer}
                    containerStyle={{top: 55}}
                    docked={false}
                    width={200}
                    open={this.state.open}
                    onRequestChange={open => this.setState({open})}
                >
                    <AppBar title="Search"/>
                    <form noValidate autoComplete="off" onSubmit={this.searchProducts}>
                        <TextField
                            id="brand"
                            label="Brand"
                            margin="normal"
                            onChange={this.handleBrand}
                        />
                        <Button variant="contained" color="primary" onClick={this.searchProducts}>
                            Search
                        </Button>
                    </form>
                </Drawer>
            </div>
        );
    }
}

export default SideNav;

I wonder WHY I'm able to read my this.state.bran value in:

handleBrand = (evt) => {
        this.setState({brand: evt.target.value});
        console.log(this.state.brand);
    }

but NOT in

 searchProducts() {
        console.log(this.state.brand);
    }

I don't understand this case.

Answer 1

searchProducts is a class method either bind it in constructor or use arrow functions (like in handleBrand ). Currently your accessing the wrong value for this

searchProducts = () =>{}

Using bind

constructor(){
    this.searchProducts = this.searchProducts.bind(this)
}

Arrow functions have lexical this . By using this inside a class method you are accessing the local scope of searchProducts not the Component 's instance

Answer 2

this works in confusing ways in JavaScript. It's not working as intended in searchProduct() because you're passing it as a prop to a child component. In your constructor you should bind it to the instance like this:

constructor(props) {
  super(props);
  this.searchProducts = this.searchProducts.bind(this);
}