当前位置: 首页 > 面试题库 >

bind(this)在ajax成功函数上不起作用

韦阳辉
2023-03-14
问题内容

我使用React和jQuery。这是我的代码的一部分。

在安装组件之前,我执行ajax请求以了解用户是否已登录。

当响应返回状态码200
时,应该设置状态。我使用的是错误的bind(this)吗?

componentWillMount: function(){
  $.ajax({
     url: "/is_signed_in",
     method: "GET",
     dataType: "json"
  }).success(function(response){
    this.setState({ signedIn: response.signed_in, currentUser: $.parseJSON(response.current_user) });
  }.bind(this));
},
componentDidMount: function(){
  console.log(this.state.signedIn);
}

编辑01

当我console.log(this);success(function(response){...})回调中。

this 在下面。

R…s.c…s.Constructor {props: Object, context: Object, state: Object, refs: Object, _reactInternalInstance: ReactCompositeComponentWrapper}_reactInternalInstance: ReactCompositeComponentWrapper_context: Object_currentElement: ReactElement_instance: ReactClass.createClass.Constructor_isOwnerNecessary: false_isTopLevel: false_mountImage: null_mountIndex: 0_mountOrder: 2_pendingCallbacks: null_pendingElement: null_pendingForceUpdate: false_pendingReplaceState: false_pendingStateQueue: null_renderedComponent: ReactCompositeComponentWrapper_rootNodeID: ".0"_warnedAboutRefsInRender: false__proto__: ReactCompositeComponentWrappercontext: Object__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: get __proto__()set __proto__: set __proto__()getDOMNode: ()__reactBoundArguments: null__reactBoundContext: ReactClass.createClass.Constructor__reactBoundMethod: ()arguments: (...)bind: (newThis )caller: (...)length: 0name: ""__proto__: ()[[TargetFunction]]: ()[[BoundThis]]: ReactClass.createClass.Constructor[[BoundArgs]]: Array[0]props: Objectrefs: Object__proto__: ObjectrenderButtonSet: ()setSignedIn: ()__reactBoundArguments: null__reactBoundContext: ReactClass.createClass.Constructor__reactBoundMethod: setSignedIn(response)arguments: (...)caller: (...)length: 1name: "setSignedIn"prototype: setSignedIn__proto__: ()<function scope>arguments: (...)bind: (newThis )arguments: (...)caller: (...)length: 1name: ""prototype: boundMethod.bind__proto__: ()<function scope>caller: (...)length: 1name: ""__proto__: ()[[TargetFunction]]: setSignedIn(response)[[BoundThis]]: ReactClass.createClass.Constructor[[BoundArgs]]: Array[0]state: ObjectcurrentUser: Objectcreated_at: "2015-07-24T18:30:38.772+09:00"email: "admin@gmail.com"facebook_account_url: nullfirstName: "유찬"github_account_url: nullgoogleplus_account_url: nullid: 1lastName: "서"linkedin_account_url: nullsns_avatar: nulltwitter_account_url: nullupdated_at: "2015-08-14T02:14:21.091+09:00"__proto__: ObjectsignedIn: true__proto__: Object__proto__: ReactClassComponent

解决方案
我上面的代码是反模式。
请遵循答案我建议的一种方法。另外,React文档已经为我的案例提供了非常有用的解决方案:通过AJAX加载初始数据

同样,setState是异步的。
这就是为什么我在控制台上登录setState时认为它不起作用的原因。
毕竟,我检查了render内部并将其作为道具传递给子组件。


问题答案:

我认为您不应在componentWillMount中对setState使用Ajax调用在componentDidMount中进行

如果您不想在拥有数据之前进行第一次渲染 ,而 这些数据仅用于初始化,请在外部进行调用,并在成功之后使用获取的数据渲染视图=====>

<Myview data={initialDataFromTheCallSuccess} /> and then put it in getInitialState

如果您选择此路径,请阅读以下内容(由于doc中所述,在某些情况下这不是反模式):https :
//facebook.github.io/react/tips/props-in-getInitialState-as-anti-
pattern.html

希望能帮助到你

编辑: 有两种方法可以做到,第一种是在React类之外获取的

  $.ajax({...}).success(function(res) {
      <MyView data={res} /> // render your function on success
  });

在MyView中,您会从道具“数据”中获取getInitialState。仅在需要调用一次get时使用此方法(请阅读反模式知识)。

其他方法正在执行您正在执行的操作,但在componentDidMount中。
https://facebook.github.io/react/tips/initial-
ajax.html

希望更清楚



 类似资料:
  • 问题内容: 我想知道为什么$(this)在jQuery ajax调用后不起作用。 我的代码是这样的。 为什么在ajax调用之后,$(this)在这种情况下不起作用?如果我在ajax之前使用它会起作用,但之后没有效果。 问题答案: 在jQuery ajax回调中,“ this”是对ajax请求中使用的选项的引用。它不是对DOM元素的引用。 您需要首先捕获“外部” $(this) :

  • 问题内容: 我的AJAX中有一个成功函数,该函数从python脚本返回响应文本,该脚本可以是“ SUCCESS”或“ EMPTY”。现在,我想在成功函数中放置一个if循环,但是if循环不起作用。我从python脚本中获取了正确的数据,因为我的警报语句可以正常工作并打印“ SUCCESS”。但是它不会进入ifloop 我已经尝试了很多方法,但是控件没有进入if循环,有人可以告诉我我在做什么错: 问题

  • 问题内容: 以下代码从文件加载html内容我使用了该线程 请让我知道问题是什么?我希望这是愚蠢的:) 编辑:正确的代码 谢谢乔恩和大家! 问题答案: callback()函数在响应到达时运行,并且不在方法范围内运行,因为该函数已经结束。 您可以在调用中使用属性来设置回调函数的上下文:

  • 问题内容: 我有一份注册表,正在使用它提交。 这是我的AJAX请求: 在我的 Submit1.php 文件中,我检查数据库中是否存在 电子邮件地址 和 用户 名字 段。如果这些值存在 而没有页面刷新, 则希望显示一条错误消息。 如何将其添加到我的AJAX请求的 成功 回调中? 问题答案: 结果可能不是JSON格式,因此当jQuery尝试如此解析时,它将失败。您可以使用回调函数捕获错误。 无论如何,

  • 在react组件挂载之前,我执行ajax请求以了解用户是否登录。 它应该在响应返回状态代码200时设置状态。 我是否错误地使用了? 编辑01

  • 问题内容: 我的html像这样 jQuery代码如下 当我单击Submit按钮时,我的ajax请求无法正常工作,看起来好像控件正在传递给JQuery Submit函数,但是ajax请求没有正确执行/正常工作,这是怎么回事? 问题答案: 将事件处理函数放入$(document).ready(function(){…})中。它现在应该工作 还添加preventDefault()以限制页面刷新