javascript - ReactJS:如何最好地处理新创建对象的 JSON 响应

Question

我有三个 React 组件:第一个是容器(NoteContainer 组件)，负责在 UI 中渲染我的对象(Note 组件)。通过 AJAX GET 以 JSON 形式获取数据。最后一个组件是一个表单 (NoteForm)，它创建新对象(通过 AJAX POST)。

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

如果 NoteForm 将创建新对象的 JSON 响应发送到 NoteContainer ，后者会将其附加到其 state.data 并重新渲染，或者应该 NoteContainer 请求对象的完整列表并完全更新其状态日期？

我认为第一种方法更好，因为它不需要请求 NoteContainer 状态中已经存在的数据。但是，我仍然不确定处理这个问题的“最佳”方法。我应该给 NoteContainer 另一个函数，比如 addNewNote ，它会从 NoteForm 中获取 JSON 数据并将其附加到 state.data 中吗？

我是 React 新手，所以如果这不是一个明确的问题，我深表歉意。这是我的组件:

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>
    );
  }
});

Answer 1

@xCrZx 建议您将状态拉到各个组件之外，并使用一个或多个顶级存储来维护状态。最简单(即“普通”)的示例是，如果您的 NoteContainer 是 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}
      ...
    );
  }
});

但是，这当然只有在关系确实存在的情况下才有效。现在我们来看看Reflux ，您可以在其中创建中央存储(以及与其一起使用的操作)来保存数据，并且组件“监听”存储。

var NoteActions = Reflux.createActins([
  'createNote',
  'getNotes'
]);

var NoteStore = Reflux.createStore({
  listenables: [NoteActions],
  init: {
    // Notes is an empty array by default
    this.notes = [];
  },
  getInitialState: function() {
    return {
      notes: this.notes
    };
  },
  onCreateNote: function(noteFormData) { ...POST here, save note JSON to this.notes on success... },
  onGetNotes: function() { ..GET here for the initial load...}
});

var NoteForm = React.createClass({
  render: function() {
    ...
      onClick={NoteActions.createNote(noteFormData)}
    ...
  }
});

var NoteContainer = React.createClass({
  mixins: [Reflux.connect(NoteStore)],
  componentDidMount: function() {
    NoteActions.getNotes();
  },
  render: function() {
    return: function() {
      .. same that you have now using this.state.notes
    }
  }
});

希望这开始有意义。强烈建议查看 Reflux(或 Redux，类似但不同)示例。