Question

我需要React.js的帮助。

我有一个名为ContactsApp的React组件，该组件调用方法componentDidMount（），该方法包含带有接收道具的Ajax调用。

componentDidMount(){
jQuery("document").ready(function(){
  jQuery("#sent-btn").click(function(ev){
     var data_json = {};

     data_json['word'] = jQuery("#word").val();
     data_json['route'] = jQuery("#route").val();
     console.log(data_json['word']);
     console.log(data_json['route']);
     $.ajax({
           type: 'post',
           url: 'logic',
           data: JSON.stringify(data_json),
           contentType: "application/json; charset=utf-8",
           traditional: true,
         }).then(function(data){
            console.log(data);
            var list = []
               for (var i = 0; i < data.Data.length; i++) {
                 list.push({"name":data.Data[i].File , "email":data.Data[i].Quantity})
               }
            this.setState({contacts:list});
         }.bind(this))
  });
 });
}

但我的问题是Web控制台对我的这些错误。

1) Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
2) Uncaught TypeError: this.setState is not a function

课程是：

- Container
  - ContactsApp
    - SearchBar
    - ContactList
      - ContactItem

最后我用：

调用render方法

render(<ContactsAppContainer />, document.getElementById('forms'));

我看到有人使用React History，但是Cassio Zen不使用这个，我觉得我没事。

我的导入库：

import React, { Component, PropTypes } from 'react';
import { render } from 'react-dom';
import 'whatwg-fetch';
import jQuery from 'jquery';

我的Go应用程序包含ajax调用的服务'login'。

我正在使用基于Cassio Zen的React component的示例。

对不起我的英语，我正在学习这个，请帮助我。

Answer 1

您正在重新绑定AJAX回调中this的上下文，但是一旦输入jQuery ready和click回调，您就已经丢失了组件的上下文。< / p>

看起来你正在使用ES6，所以简单的解决方法就是使用箭头功能。

componentDidMount() {
  jQuery("document").ready(() => {
    jQuery("#sent-btn").click(ev => {
      // ...
      $.ajax({
        // ....
      }).then(data => {
        // ...
        this.setState({contacts:list});
      });
    });
  });
}

然而，看起来你的另一个错误有更大的问题。我不确定是什么导致它，但我相信你在你的React组件中使用jQuery时，你会让自己变得困难。

老实说，我会回过头几步，尝试更好地了解如何使用事件处理程序来监听按钮点击并使用React输入更改，而不是使用jQuery。然后从应用程序中删除jQuery依赖项并切换DOM代码以使用React并使用切换AJAX代码来使用fetch。

我无法渲染我的组件

我的Go应用程序包含ajax调用的服务'login'。

1 个答案: