javascript - ReactJS 嵌套列表 (flux)

Question

我正在使用 React，遇到了嵌套列表的问题。我有 2 个列表 - 项目和待办事项，每个待办事项上都有一个 project_id。我有 4 个与这些列表相关的组件:projects-component 呈现 project-component 列表，每个组件都有自己的 todos-component将 projectId 属性设置为项目的 ID。 todos-component 使用 TodosWatchMixin 传递依赖于 component.props.projectId 的 getTodos 函数来获取todos 列表，然后呈现第 4 个组件的列表:todo-component(此处未显示。)在我将新项目添加到列表中之前，一切都很好。该项目出现了，但待办事项发生了变化——新项目中包含另一个项目的待办事项，并且该项目的其余大部分待办事项似乎也发生了变化……交互(刷新或检查待办事项错误的项目)修复了它——所以我猜我在使用 React Chrome 开发工具时可以看到新项目有它自己的 ID，但它也有一个项目列表……我错过了什么？

下面是一些代码片段:

projects-component.js

/**
 * @jsx React.DOM
 */

var React = require('react');
var Project = require('./project-component');
var ProjectsWatchMixin = require('./projects-watch-mixin');
var ProjectStore = require('./projects-store');
var Actions = require('./project-actions');
var MasonryMixin = require('./masonry-mixin.js');
var masonryOptions = {
    transitionDuration: 0,
    itemSelector: '.project-wrap'
};


function getProjects() {
  return {projects:ProjectStore.getProjects()};
}

var Projects = React.createClass({
  displayName: 'ProjectComponent',
  mixins: [ProjectsWatchMixin(getProjects), MasonryMixin(masonryOptions)],
  loadDemoData: function() {
    Actions.loadDemoData();
  },
  submitNewProject: function(e) {
    e.preventDefault();
    var t = this.refs.title.getDOMNode();
    if (t.value == '') return t.focus()
    Actions.addProject({title:t.value})
  },
  render: function() {
    var projectList = this.state.projects.map(function(project, i){
      return (
        <div className="project-wrap" key={i}>
          <Project model={project} />
        </div>
      );
    });

    return (
      <div ref="masonryContainer" className="projects">
        <div className="project-wrap text-center">
          <div className="project">
            <header>
              <h3>New Project</h3>
            </header>
            <form onSubmit={this.submitNewProject} className="input-group">
              <input type="text" className="frm-ctrl" ref="title" />
              <span className="input-group-addon">
                <button type="submit" className="btn"><i className="fa fa-plus-circle" /></button>
              </span>
            </form>
          </div>
        </div>
        <div>
          {projectList}
        </div>
      </div>
    );
  }

});


module.exports = Projects;

project-component.js

/**
 * @jsx React.DOM
 */

var React = require('react');
var Todos = require('../todos/todos-component');

var Project = React.createClass({
  noop: function(e) {
    e.preventDefault(); // yeah, yeah... not exactly noop!
  },
  render: function() {
    var m = this.props.model;
    var st = m.get('subTitle');
    if (st) st = <small>{st}</small> 
    return (
      <div className="project">
        <header>
          <h3>{m.get('title')} {st}</h3>
        </header>
        <p>{m.get('description')}</p>
        <Todos projectId={m.get('id')} />
      </div>
    );
  }
});

module.exports = Project;

todos-component.js

/**
 * @jsx React.DOM
 */

var React = require('react');
var Todo = require('./todo-component');
var TodosWatchMixin = require('./todos-watch-mixin');
var TodoStore = require('./todos-store');
// var TodoActions = require('./todo-actions');

function getTodos(component) {
  return {todos:TodoStore.getTodos(component.props.projectId)};
}

var TodoList = React.createClass({
  mixins: [TodosWatchMixin(getTodos)],

  render: function() {
    var todoList = this.state.todos.map(function(t,i){
      return <Todo key={i} model={t} />
    });
    return (
      <ul className="todo-list">
        {todoList}
      </ul>
    );
  }

});

module.exports = TodoList;

projects-store.js

var Backbone = require('backbone');
var LocalStorage = require('backbone.localstorage');

var Dispatcher = require('./project-dispatcher');
var Constants = require('./project-constants');
// var Actions = require('../actions/app-actions');
var merge = require('react/lib/merge');
var EventEmitter = require('events').EventEmitter;
var TodoStore = require('../todos/todos-store');
var CHANGE_EVENT = "change";
if (window) window.Backbone = Backbone;

var Project = Backbone.Model.extend({
  localStorage: new Backbone.LocalStorage("com.thomporter.todosApp.projects"),
  defaults: {
    sort_order: 0,
    title: '',
    subTitle: '',
    description: ''
  }
});

var Projects = Backbone.Collection.extend({
  model: Project,
  localStorage: new Backbone.LocalStorage("com.thomporter.todosApp.projects"),
  initialize: function(){
    this.comparator = this.comparatorDefault;
    this.sort();
  },
  comparatorDefault: function (model) {
    return model.get('sort_order');
  }
});

var _projects = new Projects();

_projects.fetch();

var _demoDataLoaded = false;
function _loadDemoData () {
  if (_demoDataLoaded) return;
  _demoDataLoaded = true;
  demo = require('./demo-data');
  demo.projects.map(function(p, i){
    var todos = p.todos
    delete p.todos;
    p.id = i+1000;
    ProjectStore.addProject(p);
    if (todos) {
      todos.map(function(t){
        t.project_id = p.id;
        TodoStore.addTodo(t);

      });
    }
    // _projects.sync();

  });
};
function _addProject (project) {
  if (!project.id) {
    project.id = (new Date()).getTime();
  }
  var p = new Project(project);
  p.save(project, {success:function(){
    _projects.add(p);
    ProjectStore.emitChange();
  }});
};

function _removeProject () {
  alert('Not Implemented Yet.');
};

var ProjectStore = merge(EventEmitter.prototype, {
   emitChange:function(){
    this.emit(CHANGE_EVENT)
  },
  addChangeListener:function(callback){
    this.on(CHANGE_EVENT, callback)
  },

  removeChangeListener:function(callback){
    this.removeListener(CHANGE_EVENT, callback)
  },

  get: function(id) {
    return _projects.get(id);
  },

  getProjects: function() {
    return _projects;
  },

  addProject: function(project) {
    _addProject(project);

  },

  dipatcherIndex: Dispatcher.register(function(payload){
    var action = payload.action;
    switch(payload.action.actionType) {
      case Constants.ADD_PROJECT:
        _addProject(payload.action.project);
        return; // will emit change after save success
      case Constants.REMOVE_PROJECT:
        _removeProject(payload.action.project);
        break;
      case Constants.LOAD_DEMO_DATA:
        _loadDemoData();
        break;
    }
    ProjectStore.emitChange();
    return true;
  }),

});
// _loadDemoData();
module.exports = ProjectStore;

if (window) window._projects = _projects;

可以看到the work in progress here .按 ctrl+shift+L 或 command+shift+L 加载测试数据，然后添加一个新项目，您可能会看到 Farm List 项目显示在你的新项目。

Answer 1

您正在使用 Array.map 调用的索引作为您的组件键。这意味着您的列表组件不能保证在每次渲染时都具有相同的键值。 React 在进行 diff 时在内部使用这些来协调 DOM，因此如果您使用数组索引作为键，每次呈现的内容都会不同。它在文档中明确提到:http://facebook.github.io/react/docs/multiple-components.html#dynamic-children .

您需要根据项目的自然 ID(即，不是数组索引)分配键，并确保它们是字符串(来自上面的链接):

Numeric properties will be ordered sequentially and before other properties. If this happens React will render components out of order. This can be avoided by adding a string prefix to the key