Question

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

在下面的代码中，当我调用this.props.setMessage.call(this)时，this引用Container而不是Letter，因此Letter的状态保持不变。通过在this Container函数的正文中插入console.log(this)，我可以看到setMessage引用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 () {
        ...
    }
}

Answer 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是正确的方法。在构造函数中，您应该像以前一样直接分配初始状态。

Answer 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 () {
        ...
    }
}

＆＃34;这＆＃34;在箭头函数中使用时绑定到直接范围另外，更喜欢在this.state上使用this.setState。 = ...

在React中将函数作为props传递时无法绑定'this'

2 个答案: