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

Question

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

Cannot read property 'state' of undefined

我的 class 组件具有以下状态：

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 可以在 constructor 中 bind 或使用 arrow functions（如 handleBrand）。当前您访问了 this

的错误值

searchProducts = () =>{}

使用bind

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

箭头函数有lexical this。通过在 class 方法中使用 this，您正在访问 searchProducts 的本地 scope 而不是 Component 的实例

Answer 2

this 在 JavaScript 中的 confusing ways 工作。它在 searchProduct() 中没有按预期工作，因为您将它作为 prop 传递给子组件。在你的构造函数中，你应该像这样将它绑定到实例：

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

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

React state component - Cannot read property 'state' of undefined

javascript

reactjs

react-state

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

React state component - Cannot read property 'state' of undefined

javascript

reactjs

react-state

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