Question

在我的代码中，我有render()函数。在这个方法中，this.state可用。如果this.LoadingIcon只包含文字，那么一切都很好：

public render() {
    return <div>

            <h1>Search company</h1>

            <this.LoadingIcon />

            <label value={this.state.query} />

            <div className='form-group'>
                <input type='text' className='form-control' value={this.state.query} onChange={this.handleChange.bind(this)} />
            </div>

            <button onClick={() => { this.searchVat() }}>Search</button>
        </div>;
}

但是，如果我突然想要使用状态并使LoadingIcon成为条件：

LoadingIcon(props: any) {
    if (this.state.loading) {
        return <h1>LOADING</h1>;
    } else {
        return <h1>NOT LOADING</h1>;
    }

}

你得到了：

TypeError: Cannot read property 'state' of undefined

这是为什么？以及如何解决？

Answer 1

您的代码存在两个问题：

this.state未定义，因为LoadingIcon是stateless component
在React中，父组件的状态不能直接在子组件中使用

要访问子项中父项的状态，您需要将状态作为prop传递：

<this.LoadingIcon loading={this.state.loading} />

然后在您的子组件中，您可以使用props来检索父级的状态：

LoadingIcon(props: any) {
    if (props.loading) {
        return <h1>LOADING</h1>;
    } else {
        return <h1>NOT LOADING</h1>;
    }
}

在子组件内部未定义this.state

1 个答案: