Javascript ReactJS：如何最好地处理新创建对象的JSON响应

我有三个React组件：第一个是容器（

NoteContainer

component），负责在UI中呈现我的对象（

Note

component）。数据通过AJAX GET以JSON的形式获取。最后一个组件是一个表单（

NoteForm

），它创建新对象（通过ajaxpost）

来自POST的响应只是新创建对象的JSON表示，而不是所有对象的JSON

NoteForm

应该将创建新对象的JSON响应发送到将其附加到state.data并重新呈现的

notecainer

中，还是

notecainer

应该请求对象的完整列表并完全更新其状态日期

我认为第一种方法更好，因为它不需要请求NoteContainer状态中已经存在的数据。然而，我仍然不确定处理这个问题的“最佳”方法。我是否应该给

notecainer

另一个函数，比如

addNewNote

，它将从NoteForm获取JSON数据并将其附加到state.data

我是新手，所以如果这不是一个明确的问题，我道歉。以下是我的组件：

var NoteContainer = React.createClass({
  getInitialState: function(){
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url, 
      dataType: 'json',
      cache: false,
      success: function(data){
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err){
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    var noteNodes = this.state.data.map(function(note){
      return (
        <Note title={note.title} body={note.body} />
      );
    });
    return (<div className='noteContainer'>{noteNodes}</div>);
  }
});

var Note = React.createClass({
  render: function(){
    return (
      <div className="note" >
        <h1>{this.props.title}</h1>
        <p>{this.props.body}</p>
      </div>
    );
  }
});


var NoteForm = React.createClass({
  getInitialState: function(){
    return {'title': '', 'body': ''}
  },
  handleTitleChange: function(e){
    this.setState({title: e.target.value});
  },
  handleBodyChange: function(e){
    this.setState({body: e.target.value});
  },

  handleSubmit: function(e){
    e.preventDefault();
    var note = {
      title: this.state.title,
      body: this.state.body};
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: note,
      success: function(data){
        // Send data to NoteContainer? 
      }.bind(this),
      error: function(xhr, status, err){
        console.error(this.props.url, status, err.toString());
      }.bind(this)
  });
},

  render: function(){
    return (
      <form> 
        <input
          type='text'
          placeholder='Title'
          value={this.state.title}
          onChange={this.handleTitleChange} />
        <textarea onChange={this.handleBodyChange}>
          {this.state.body}
        </textarea>

      </form>
    );
  }
});

var NoteContainer=React.createClass({
getInitialState:函数（）{
返回{data:[]}；
},
componentDidMount:function（）{
$.ajax({
url:this.props.url，
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
render:function（）{
var noteNodes=this.state.data.map（函数（注释）{
返回(
);
});
返回（{noteNodes}）；
}
});
var Note=React.createClass({
render:function（）{
返回(
{this.props.title}
{this.props.body}

);
}
});
var NoteForm=React.createClass({
getInitialState:函数（）{
返回{'title'：''，'body'：''}
},
handleTitleChange:功能（e）{
this.setState（{title:e.target.value}）；
},
车把座更换：功能（e）{
this.setState（{body:e.target.value}）；
},
handleSubmit:函数（e）{
e、 预防默认值（）；
var注释={
标题：this.state.title，
body:this.state.body}；
$.ajax({
url:this.props.url，
数据类型：“json”，
键入：“POST”，
数据：注：，
成功：功能（数据）{
//将数据发送到NoteContainer？
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
render:function（）{
返回(
{this.state.body}
);
}
});

最好的方法是将所有注释保持在全局状态，并在需要时逐个添加新实体。它可以通过全局存储（如Redux或Reflech）来实现。

最好的方法是将所有注释保持在全局状态，并在需要时逐个添加新的实体。它可以通过全局存储来实现，比如Redux或Reflux。

@xCrZx建议您将状态拉到单个组件之外，并使用一个或多个顶级存储来维护状态。最简单的（即“普通”）示例是，如果您的

notecainer

是

NoteForm

的父级。然后，您只需将回调从

NoteContainer

传递到

NoteForm

：

var NoteContainer = React.createClass({
  createNote: function() {
    ...
  },
  render: function() {
    return (
      ...
      <NoteForm createNote={this.createNote}>
      ...
    );
  }
});

var NoteForm = React.createClass({
  props: {
    createNote: React.PropTypes.func.isRequired
  },
  render: function() {
    return (
      ...
        onClick={this.props.createNote}
      ...
    );
  }
});

---

希望这开始有意义。强烈建议查看回流（或Redux，类似但不同）示例。

@xCrZx建议您将状态拉到单个组件之外，并有一个或多个顶级存储来保持状态。最简单的（即“普通”）示例是，如果您的

notecainer

是

NoteForm

的父级。然后，您只需将回调从

NoteContainer

传递到

NoteForm

：

var NoteContainer = React.createClass({
  createNote: function() {
    ...
  },
  render: function() {
    return (
      ...
      <NoteForm createNote={this.createNote}>
      ...
    );
  }
});

var NoteForm = React.createClass({
  props: {
    createNote: React.PropTypes.func.isRequired
  },
  render: function() {
    return (
      ...
        onClick={this.props.createNote}
      ...
    );
  }
});

---

希望这开始有意义。强烈建议查看回流（或Redux，类似但不同）示例。

我不知道“将所有节点保持在全局状态并添加新实体”是什么意思。我将研究Redux和reflew，但是在vanilla ReactJS的上下文中，什么是最好的方法呢？我不知道“让所有节点保持全局状态并添加新实体”是什么意思。我会研究Redux和Reflux，但是在香草反应JS的上下文中，什么是最好的方法呢？--谢谢，如果回流或Redux有助于解决/简化此类用例，我似乎真的需要深入研究它。你介意看一下我的答案吗？我的答案是，在处理过程中不要出现回流/重复，也不要让一种成分变成另一种成分的子成分？非常感谢您的反馈，谢谢！谢谢，如果回流或Redux有助于解决/简化此类用例，我似乎真的需要深入研究它。你介意看一下我的答案吗？我的答案是，在处理过程中不要出现回流/重复，也不要让一种成分变成另一种成分的子成分？非常感谢您的反馈，谢谢！