bind(this) 不适用于 ajax 成功函数

IT技术 javascript jquery ajax reactjs
2021-03-27 21:35:07

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

在react组件安装之前,我执行 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 不起作用的原因。
毕竟,我在渲染内部检查并作为props传递给子组件。

1个回答

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

如果你不想做的第一渲染您在数据之前这些数据只是用于初始化执行您的通话外,并成功使您的观点与获取的数据=====>

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

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

希望能帮助到你

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

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

在 MyView 中,您从props“数据”中获取了InitialState。仅当您需要调用一次 get 时才使用此方法(阅读反模式内容)。

其他方法正在做你正在做的事情,但在 componentDidMount 中。 https://facebook.github.io/react/tips/initial-ajax.html

希望它更清楚

setState 是异步的,console.log in render 或 setState 回调 setState({...}, function() { console.log(this.state);}); 对于绑定,我不知道检查它是否正确编写并且您确实收到了一些东西:)
2021-05-23 21:35:07
我没有 100% 理解你的意思。那么我如何准确地发送 get 请求componenetDidMount呢?我应该this.state.signedIn作为道具传递给子组件吗?你能告诉我任何示例代码吗?
2021-06-05 21:35:07
谢谢理查德。我认为你的意思是第二个方法作为 React Docs 提供的这个技巧,facebook.github.io/ react/tips/initial-ajax.html
2021-06-10 21:35:07
我从来没有读过这个提示,但这正是我的意思:) 我将它添加到我为其他人的答案中
2021-06-10 21:35:07
大声笑但是.. 仍然绑定(这个)不工作 tho.. 虽然this.state.signedIn仍然是null.
2021-06-19 21:35:07