使用 react nodejs 和 ajax 更新 mongodb 的文档

Question

嗨，我开始用 nodejs 练习 react 和 mongodb。 通过使用反应，我在 nodejs 的帮助下获取数据...... 现在我正在尝试在nodejs的帮助下更新或删除mongodb的文档....

我在 nodejs 中为他们编写了服务，但我不知道如何将它与 React 连接起来。

请帮我解决这个问题。

提前谢谢...

Answer 1

如果你去 react 网站，看看他们的教程，他们有一个很好的 ajax 调用示例。

基本上你首先编写你的 ajax 函数，所以如果它是一个 GET 请求，它可能看起来像这样：

你的 nodejs 代码：

//the route we get our users at is allUsers
app.get('/allUsers, function(req, res) { 
User.find({}, function(err, userarray) { //we grab all users from our mongo collection, and that array of users is called userarray
      res.json(userarray); //we return the json with it
  });
});

现在是反应部分：

var Users = React.createClass({

getUsers : function() { //we define a function for getting our users

   $.ajax({ //call ajax like we would in jquery
            url: '/allUsers',  //this is the url/route we stored our users on
            dataType: 'json',
            success: function(data) { //if we get a Success for our http get then..
               this.setState({user:data}); //set the state of our user array to whatever the url returned, in this case the json with all our users
               }.bind(this),
        error: function(xhr, status, err) { //error logging and err tells us some idea what to debug if something went wrong.
                console.log("error");
               console.error(this.props.url,status, err.toString());
            }.bind(this)
        });

   },

getInitialState: function() { //setting our initial state for our user array we want to use in our react code
       return {

          users: [], //initialize it empty, or with whatever you want

       }
    },

componentDidMount : function() {
this.getUsers(); //we are invoking our getUsers function here, therefore performing the ajax call
},

render : function() {
return(
//do what we want to do with our array here I guess!
<div>

<PrintArray users = {this.state.users} />

</div>
)
}
});
//Our new Class called Printarray
var PrintArray = React.createClass({
render : function() {
    //Psuedocode
    return(
     ul {
       this.props.users.map(function(user){  //we are mapping all our users to a list, this.props.users is inheritance what we passed down from our Users class
            return (
            <li key = user.id> user.name </li>
            )
      })

     )
}
    </ul>
});

最后只调用我们的主类，

React.render(<Users   />,
document.getElementById(domnNode)); //your div's id goes here

我已将代码注释掉，如果您还有问题，请随时提问！我不知道你是否也想做一个 post 方法，但它类似。您只需将 GET 更改为 POST，而不是没有参数的函数，您很可能需要一个参数，所以它可能类似于：

sendNewUser : function(data) {
 //do ajax post stuff here
}

在渲染中：

render : function(){
   sendNewUser(blah);
}

除了你可能有一个表单或其他东西，甚至是另一个处理添加新用户的类。这个问题似乎很广泛，所以我只是大致概述了我将如何做到这一点！