ReactJS嵌套列表(通量)

Question

我在捣乱反应，在嵌套列表上有问题。我有两个清单-项目和待办事项，每个待办事项都有一个project_id。我有4个与这些列表相关的组件：projects-component，它呈现一个project-component的列表，每个组件都有自己的todos-component，并将projectId属性设置为项目的ID。todos-component使用一个传递getTodos函数的getTodos函数，该函数依赖于component.props.projectId来获取待办事项列表，然后呈现第四个组件的列表：todo-component (未在这里显示)。在我将一个新的项目添加到列表中之前，这一切都非常好。该项目出现，但待办事项转移-新的项目有另一个项目的待办事项，而大多数项目的待办事项似乎也转移。交互(在错误的项目中刷新或签出待办事项)修复了它--因此，我猜想我使用React Dev工具时，可以看到新项目上有它自己的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;

你可以看到这里正在进行的工作。点击ctrl+shift+L或command+shift+L加载测试数据，然后添加一个新项目，您可能会在新项目中看到“农场”列表项。

Answer 1

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

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

数值属性将按顺序排列，并在其他属性之前排序。如果发生这种情况，React将使组件出现故障。可以通过在键中添加字符串前缀来避免这种情况。