Question

我遇到以下问题-无法从状态读取值，但出现错误：

无法读取未定义的属性“状态”

我的班级状态为

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;

我想知道为什么我能够读取我的this.state.bran值：

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

但不在

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

我不了解这种情况。

Answer 1

searchProducts是class method中的bind或使用constructor（如arrow functions中的handleBrand）。当前，您为this

输入了错误的值

searchProducts = () =>{}

使用bind

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

箭头功能具有lexical this。通过在类方法中使用this，您将访问scope的本地searchProducts而不是Component的实例

Answer 2

this在JavaScript中的confusing ways中有效。它无法像searchProduct()中那样工作，因为您将其作为道具传递给子组件。在构造函数中，应将其绑定到实例，如下所示：

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

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

2 个答案: