在 React 中将函数作为道具传递时无法绑定“this”答案

【问题标题】：Unable to bind 'this' when passing a function as props in React在 React 中将函数作为道具传递时无法绑定“this”
【发布时间】：2017-12-11 23:44:53
【问题描述】：

我的Letter 组件需要多次重用，其构造函数中发生的事情发生了微小的变化。我的想法是将一个函数作为道具传递给Letter，这样我就可以在构造函数中调用它。但是，我遇到了this 的问题。

在下面的代码中，当我调用this.props.setMessage.call(this) 时，this 指的是Container 而不是Letter，所以Letter 的状态保持不变。我可以通过在Container 的setMessage 函数的主体中插入console.log(this) 来看到this 引用Container。

如何绑定this 以便在我运行此代码时Letter 的状态会发生变化？

来源：

export class Container extends React.component {

    ...

    setMessage = () => {
        this.state.message = 'hello';
    }

    render () {
        return (
            <div>
                <Letter setMessage={this.setMessage} />
            </div>  
    }
}

export class Letter extends React.component {
    constructor (props) {
        super(props);
        this.props.setMessage.call(this); // doesn't work, 'this' should refer to Letter but refers to Container
    }

    render () {
        ...
    }
}

【问题讨论】：

您以错误的方式更新状态，请使用 setState：this.setState({message: 'hello';})

标签： javascript reactjs

【解决方案1】：

那是因为您使用的是arrow function.

箭头函数立即永久绑定到词法上下文。或者简单地说，在这种情况下，this 将始终是一个容器。

要解决此问题，只需将其定义为普通函数即可。

export class Container extends React.Component {
  ...
  setMessage() {
    // As Mayank Shukla pointed out, this is how you should change state
    this.setState({ message: 'hello' });
  }
  ...
}

一般来说，setState 是更新状态的正确方式。但是，如果您尝试在构造函数中立即使用setState，那么you will get an error.

所以只要知道，如果您在任何地方设置该状态，但构造函数，setState 是这样做的正确方法。在构造函数中，您应该像以前一样直接分配初始状态。

【讨论】：

就是这样！非常感谢，我整个上午都在努力找出问题所在。
@aethos 很高兴我能帮上忙！
在 OP 的代码中，setMessage 是从构造函数中调用的，这是唯一可以直接分配 this.state 的地方。我不是 100% 确定，但我认为在构造函数（或构造函数调用的同步函数）中调用 this.setState 会导致错误。 stackoverflow.com/questions/34961853/…
@JordanRunning 非常好。谢谢你提出来。我会更新我的答案以包含相关信息。
我以为我让它工作了一段时间，但现在看起来我遇到了一个新错误：Uncaught TypeError: Cannot add property state, object is not extensible。这发生在我尝试执行this.state = { ... } 的行上，这似乎意味着我无法修改this？另一方面，this.setState() 不起作用，正如你所说...

【解决方案2】：

试试

export class Container extends React.component {

    ...

    setMessage() {
        this.setState({
            message: 'hello'
        });
    }

    render () {
        return (
            <div>
                <Letter setMessage={this.setMessage} />
            </div>  
    }
}

export class Letter extends React.component {
    constructor (props) {
        super(props);
    }

    setMessage() {
        this.props.setMessage();
    }

    render () {
        ...
    }
}

"this" 在箭头函数中使用时绑定到直接作用域此外，更喜欢使用 this.setState 而不是 this.state。 = ...

【讨论】：