Parse platform 如何在react中保留上下文而不使用string.bind（这个）？

我使用react从解析中检索数据，在自己的函数中对其进行操作，然后在渲染中更新组件

问题是我不能在自己的复杂函数中更新状态，除非我附加一个bind字符串（这个）。整个组件如下所示：

React.Component({

getInitialState: function () {
 return{ 
  isloading:true
 }
},

componentDidMount: function(){
 this.myStupidFunction()
}, 

myStupidFunction : function(){
(
 (
  (nested parse queries that eventually ... 
 return an object and set isloading:false).bind(this))
.bind(this))
.bind(this)
},

render: function (){
  if (this.state.isloading) {
   return(
    <Text "...isloading"/>
   )
  } else {
   return(
    ...actually return important stuff...
   )
  }
 }
})

React.Component({
getInitialState:函数（）{
返回{
孤岛加载：正确
}
},
componentDidMount:function（）{
this.myStupidFunction（）
}, 
myStupidFunction:function（）{
(
(
（嵌套的解析查询最终。。。
返回一个对象并设置isloading:false）。绑定（this））
.绑定（本）
.绑定（此）
},
渲染：函数（）{
if（此.state.isloading）{
返回(
)
}否则{
返回(
…实际上是归还重要的东西。。。
)
}
}
})

做这件事最聪明的方法是什么？我真的需要为每个嵌套函数绑定（this）吗？

在函数开头使用a来捕获

this

。它可以在任何嵌套结构中使用。这种闭包的常规名称是

self

\u this

和

that

。我更喜欢

self

myStupidFunction : function(){
  var self = this;
  someAsyncCall(1,2, function(result) {
     //some nested stuff
     anotherAsyncCall(1,2 function(innerResult) {
       self.setState(innerResult);
     });
  });
}

---

有几种方法可以维护组件的上下文

使用ES6箭头 如果使用ES6箭头定义函数。箭头函数强制此函数的内部上下文与外部上下文相同，无论函数如何调用

parse.find({
  success: results => {
    // this is correct
    console.log(this);
  }
});

我认为这是最优雅的解决方案，但是

使用组件方法 React自动将

此

绑定到组件上的每个顶级方法中。它们总是保证有正确的上下文

onSuccess: function() {
  // this is correct
  console.log(this);
},
componentWillMount: function() {
  parse.find({
    success: this.onSuccess
  });
}

在我看来，这也是相当优雅的。它可以让React在编写代码时处理混乱的上下文。但是，这可能意味着您在组件的顶层使用了太多的方法，因此请谨慎使用

作为论据 一些函数，如

map

允许您有选择地传递上下文作为

此

作为最终参数。这允许您在不使用

.bind（This）

的情况下维护正确的上下文

这只适用于某些方法，因此它不是真正的通用解决方案

别名

此

创建对此的引用并使用该引用

var __this__ = this;

parse.find({
  success: results => {
    // __this__ is correct
    console.log(__this__);
  }
});

这种攻击在Javascript中一直存在，但我认为这不是解决问题的好方法

使用ES7函数绑定 对于那些喜欢在边缘上使用Javascript的人，您还可以使用-当前在中实现的实现来实现这一点

---

这需要使用ES7的实验建议阶段功能。您可能还不想开始使用它，但知道它肯定很有趣。左侧的值将绑定到右侧的函数中，因为

此

一种解决方案可以使用局部变量

data.map(function() {
  console.log(this);
  // this is correct
}, this);

myStupidFunction:function(){
    var that=this
    ParseReact.Mutation.Create('Place', {
                    name: 'New Place',
                    user: Parse.User.current()
                })
                .dispatch()
                .then(function() {
                    that.refreshQueries();
                });
}

---

使用ES7属性初始化器语法，目前在Babel中实现。 键是

methodName=（）=>{//methodreturn}

你可以读更多

从“React”导入React；
导出默认类注释扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
编辑：假
}
}
render（）{
常量编辑=this.state.editing；
返回(
{编辑？this.renderdit（）：this.renderTask（）}
)
}
renderdit=（）=>{
返回(
)
}
renderTask=（）=>{
const onDelete=this.props.onDelete；
返回(
{this.props.task}
{onDelete？this.renderDelete（）：null}
)
}
renderDelete=（）=>{
返回(
x
)
}
编辑=（）=>{
这是我的国家({
编辑：对
})
}
检查输入=（e）=>{
如果（e.key==“输入”）{
这是完成编辑（e）；
}
}
finishEdit=（e）=>{
this.props.onEdit（即target.value）；
这是我的国家({
编辑：假
})
}
}

Ok，那么Tyrsius引用了上面的第三个选项？没错。虽然我不太喜欢这个选项，但它总是让人感觉有点不舒服。他明确表示他没有使用ES6，“作为一个参数”会产生与

这个
@Tyrsius相同的字符串结尾好吧，也许它会帮助其他人？我只是列出了备选方案，而不是猜测提问者想要使用哪一个。谢谢所有的答案。我不能向上投票，因为我是一个傻瓜。你为什么不用局部变量来代替呢？
myStupidFunction:function(){
    var that=this
    ParseReact.Mutation.Create('Place', {
                    name: 'New Place',
                    user: Parse.User.current()
                })
                .dispatch()
                .then(function() {
                    that.refreshQueries();
                });
}