ReactJS皮质对象更新渲染未调用

ReactJS Cortex Object updated by render not invoked?

本文关键字：调用 更新 对象 ReactJS      更新时间：2023-09-26

我正在尝试实现Emberjs的Todo应用程序作为github上mquan的皮质练习。我目前正在实施的"所有"，"活动"，"完成"过滤器，点击一个锚将导致锚被突出显示(类添加)。

我创建了如下内容:

var filtercortex = new cortex([
    {title:'all', selected:true, key:1},
    {title:'completed', selected:false, key:2},
    {title:'active', selected:false, key:3}
]);

使用以下渲染函数(在父元素中):

  render: function() {
    var filters = filterCortex.map(function(filter) {
      return (
        <li>
          <FilterAnchor cortex={filterCortex} filter={filter} />
        </li>
      )
    });
    ...
    return ...
          <ul id='filters'>
            {filters}
          </ul>

和FilterAnchor的定义:

var FilterAnchor = React.createClass({
  handleClick: function() {
    var that = this;
    this.props.cortex.forEach(function(filter) {
      if (filter.key.getValue() == that.props.filter.key.getValue()) {
        console.log(filter.title.getValue(), true);
        filter.selected.set(true);
      } else {
        console.log(filter.title.getValue(), false);
        filter.selected.set(false);
      }
    });
    return false;
  },
  render: function() {
    var className = (this.props.filter.selected.getValue()) ? 'selected' : '';
    return (
      <a className={className} href="#" onClick={this.handleClick}>
        {this.props.filter.title.getValue()}
      </a>
    )
  }
});

现在，当我点击时，我没有看到类'selected'被应用于锚链接。

然而，经过调查，我注意到:

Clicking "All":
All true 
Completed false
Active false 
Clicking "Completed":
All true 
Completed false
Active false

所以我确信filtercortex内的对象已经正确更新(您可以打开firebug来检查)。但是，FilterAnchor.render是而不是被触发。

这是一个bug吗?

源代码:https://github.com/vicngtor/ReactTodo/blob/cortex/script.jsx

在Cortex自述文件顶部的示例底部是这样的:

orderCortex.on("update", function(updatedOrder) {
  orderComponent.setProps({order: updatedOrder});
});

在你的代码中有一个等价的部分吗?如果没有，那么问题是皮质数据存储的更新事件没有设置为触发视图的更新，在这个例子中，视图的更新是通过调用顶级React组件上的setProps来完成的。

相关文章：