javascript - ReactJS - 无法读取未定义的属性 'items'

Question

我正在学习 ReactJS，但我偶然发现了这个我无法弄清楚的错误。

我想从其子组件更改父组件的 items 数组状态。我尝试将 addItem 函数作为 prop 传递给 children 组件，在输入时，子组件调用此函数并传入输入值。

当我尝试在 addItem 方法中使用 console.log(this.state.items) 时，出现此错误。

Uncaught TypeError: Cannot read property 'items' of undefined

主要App.js

class App extends Component {
    constructor() {
        super();
        this.state = {
            items: []
        };
    }

    render() {
        return (
            <div className="App">
                <p>Todo List</p>
                <AddItemBox addNewItem={this.addItem}/>
                <ItemsList items={this.state.items}/>
            </div>
        );
    }

    addItem(item) {
        var listItems = this.state.items;
        listItems.push(item);
        this.setState({items: listItems});
    }
}

子组件:AddItemBox.js

class AddItemBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            item: '' // input value
        };
    }

    render() {
        return (
            <div className='AddItemBox'>
                <input type='text' placeholder='add item' onChange={e => {
                this.onInputChange(e.target.value)
            }} onKeyPress={e => {
                if (e.key === 'Enter') {
                    this.onInputEnter(e.target.value)
                }
            }}/>
            </div>
        );
    }

    onInputChange(item) {
        this.setState({item});
    }

    onInputEnter(item) {
        // Now add it to the 'items' array state
        this.props.addNewItem(item);
        this.setState({item: ''});
    }
}

Answer 1

我可以帮助@AndrewLi 解释一下。看看这个article 。它中途解释了为什么需要在 React 中绑定(bind)函数。快速解释归结为范围。

addItem 函数中的 this 是什么？它可能不是你所期望的那样。因此，您必须将适当的 this 绑定(bind)到该函数，以便您可以按照您想要的方式使用它，例如调用 this.state.items。如果 this 不是您期望的 this，您将得到不希望的结果。

所以你可以这样做:

constructor(props) {
        super(props);
        this.state = {
            item: '' // input value
        };
        
        this.addItem = this.addItem.bind(this)
    }

或者您可以使用 es6 并执行以下操作:

addItem = (item) => {
    var listItems = this.state.items;
    listItems.push(item);
    this.setState({items: listItems});
}

两者都会给出相同的结果