Javascript 无法绑定'；这'；在React中作为道具传递函数时

我的

字母

组件需要多次重复使用，其构造函数中发生的变化很小。我的想法是将函数作为道具传递给

字母

，以便在构造函数中调用它。但是，我对

这个

有一个问题

在下面的代码中，当我调用

this.props.setMessage.call（this）

时，

this

指的是

容器，而不是
字母
，因此
字母
的状态保持不变。我可以通过在
Container
中的
setMessage
函数体中插入
console.log（this）
，看到
this
指的是
Container

如何绑定
此
，以便在运行此代码时更改
字母的状态

资料来源：

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

导出类容器扩展React.component{
...
setMessage=（）=>{
this.state.message='hello'；
}
渲染（）{
返回(
}
}
导出类字母扩展React.component{
建造师（道具）{
超级（道具）；
this.props.setMessage.call（this）；//不起作用，“this”应指字母，但指容器
}
渲染（）{
...
}
}
这是因为您使用的是

Arrow函数立即永久绑定到词法上下文。或者简单地说，在本例中，
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
，则

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

Arrow函数立即永久绑定到词法上下文。或者简单地说，在本例中，
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
，则

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

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

导出类容器扩展React.component{
...
setMessage（）{
这是我的国家({
留言：“你好”
});
}
渲染（）{
返回(
}
}
导出类字母扩展React.component{
建造师（道具）{
超级（道具）；
}
setMessage（）{
this.props.setMessage（）；
}
渲染（）{
...
}
}

在arrow函数中使用时，“this”绑定到立即作用域
另外，更喜欢使用this.setState而不是this.state.=…
试试看

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

导出类容器扩展React.component{
...
setMessage（）{
这是我的国家({
留言：“你好”
});
}
渲染（）{
返回(
}
}
导出类字母扩展React.component{
建造师（道具）{
超级（道具）；
}
setMessage（）{
this.props.setMessage（）；
}
渲染（）{
...
}
}

在arrow函数中使用时，“this”绑定到立即作用域
另外，更喜欢使用this.setState而不是this.state.=…
如果您以错误的方式更新状态，请使用setState:
this.setState（{message:'hello'；}）
如果您以错误的方式更新状态，请使用setState:
this.setState（{message:'hello'；}）
就是这样！非常感谢，我整个上午都在努力想到底出了什么问题。@aethos很高兴我能帮上忙！在OP的代码中，构造函数调用了
setMessage
，这是唯一一个可以直接分配
this.state
的地方。我不是100%确定，但我想以一种方式调用
this.setState
构造函数（或构造函数调用的同步函数）结果出现错误。@jordan运行得很好。感谢您提出此问题。我将更新我的答案以包含有关此问题的信息。我本以为它运行了一段时间，但现在似乎出现了一个新错误：
Uncaught TypeError:无法添加属性状态，对象不可扩展
。这发生在我尝试的行上ng to do
this.state={…}
，这似乎意味着我不能修改
this
？另一方面，
this.setState（）
不起作用，正如你所说的……就是这样！非常感谢你，我整个上午都在努力找出问题所在。@aethos很高兴我能帮上忙！在OP的代码中，构造函数调用了
setMessage
，这是你可以直接分配
这个的唯一地方。state
。我不是100%确定，但我想调用它<代码>构造函数中的this.setState
（或构造函数调用的同步函数）结果出现错误。@jordan运行得很好。感谢您提出此问题。我将更新我的答案以包含有关此问题的信息。我本以为它运行了一段时间，但现在似乎出现了一个新错误：
Uncaught TypeError:无法添加属性状态，对象不可扩展
。这发生在我尝试的行上ng to do
this.state={…}
，这似乎意味着我无法修改
this
？另一方面，
this.setState（）
不起作用，正如您所说。。。