Question

我试图在单击按钮时调用一个函数（具有标题和类别的值）。这些值存储在组件的状态中，并且当我console.log（this.state）时，这些值是正确的。但是，调用该函数时，标题的值仍然保留，但类别未定义。

当我将要调用的函数放入另一个函数时，它可以工作，我不确定为什么原始绑定导致其中一个值变得不确定。 “这个”迷路了，它在哪里迷路了？

我尝试理解React this.state is undefined?，https://javascript.info/bind，Binding this? Getting undefined?和Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?中的解释，但我认为它不能解释我的经历。

是否我使用了过多的this / bind导致了问题？

class CreateItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputTitle: '',
            selectedCategory: ''
        }
    }

    // works when I put the createItem(title, category) inside this function
    onClickAddItem() {
        this.props.createItem(this.state.inputTitle, this.state.selectedCategory);
    }

    render() {
        <div>
        // this doesn't work (edit: due to typo where it should be selectedCategory and not inputCategory) 
        <Button text={'Create'} onClick={this.props.createItem.bind(this, this.state.inputTitle, this.state.inputCategory)}/>

        // this works
        <Button text={'Create'} onClick={this.onClickAddItem.bind(this)}/>
        </div>
    }
}

// createPublicChat function is in another file

export function createItem(title, category) {
    console.log(title, category);
}

我希望输出title =“ BookA”，类别=“ Fiction”来打印“ Book A Fiction”到控制台，但是实际输出是“ Book A undefined”

编辑：有一个拼写错误导致未定义的问题（如@ bkm412所指出）。两者都可以，谢谢！

Answer 1

我认为有错字

<Button text={'Create'} onClick={this.props.createItem.bind(this, this.state.inputTitle, this.state.inputCategory)}/>

this.state.inputCategory应该更改为this.state.selectedCategory

Answer 2

我注意到该代码中的一些不良做法。调用带有某些参数的函数的更好方法如下：

<Button onClick={() => this.props.createItem(this.state.title, this.state.selectedcategory)} />

为防止绑定错误，还应该将所有函数都绑定到一个位置，即在构造函数内部。

constructor(props) {
        super(props);
        this.state = {
            inputTitle: '',
            selectedCategory: ''
        }
        this.createItem = this.createItem.bind(this);
    }

此外，您不需要绑定作为prop传递给组件的函数。

Answer 3

首先永远不要在render方法内绑定函数，因为每当重新渲染组件时，它都会进行新的绑定。如果要绑定功能，则理想的位置是constructor方法内部。

或者，您可以使用箭头功能来避免绑定问题。
例如：onClickAddItem=()=>{}

这样做，您不必显式地将类函数绑定到this，因为箭头函数没有与this关联，并且引用了封闭的词法范围。

在此处详细了解箭头功能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ES6函数绑定未定义（this.state捕获值）

3 个答案: