React 组件视图没有得到更新

Question

我有一个管理列表中多个手风琴的 React 组件，但是当我在 React 开发工具上更新 children 时，它显示更新后的文本，但在 view/ui 上，它不更新。请指教

var AccordionComponent = React.createClass({
  getInitialState: function() {
  var self = this;
  var accordions = this.props.children.map(function(accordion, i) {
   return clone(accordion, {
    onClick: self.handleClick,
    key: i
  });
});

  return {
    accordions: accordions
  }
},
handleClick: function(i) {
  var accordions = this.state.accordions;

  accordions = accordions.map(function(accordion) {
    if (!accordion.props.open && accordion.props.index === i) {
      accordion.props.open = true;
    } else {
      accordion.props.open = false;
    }
    return accordion;
  });

  this.setState({
    accordions: accordions
  });
},
componentWillReceiveProps: function(nextProps) {
  var accordions = this.state.accordions.map(function(accordion, i) {
    var newProp = nextProps.children[i].props;

    accordion.props = assign(accordion.props, {
      title: newProp.title,
      children: newProp.children
    });

    return accordion;
  });

  this.setState({
    accordions: accordions
  });
},
render: function() {
  return (
    <div>
      {this.state.accordions}
    </div>
  );
}

编辑：
该组件确实触发了 componentWillReceiveProps 事件，但它仍然没有更新。

谢谢

Answer 1

经过几天的努力解决这个问题，我想出了一个解决方案。 componentWillReceiveProps 事件是在组件的 props 发生变化时触发的，所以这没有问题。问题是 AccordionListComponent、AccordionComponent 的孩子没有更新它的 values/props/state。

当前解决方案：

componentWillReceiveProps: function(nextProps) {
 var accordions = this.state.accordions.map(function(accordion, i) {
    // get current accordion key, and props value
    // update new props with old
    var newAc = clone(accordion, nextProps.children[i].props);

    // update current accordion with new props
    return React.addons.update(accordion, {
      $set: newAc
    });
  });

 this.setState({
   accordions: accordions
 });
}

我试过只克隆和重置手风琴，但显然它没有更新组件。

谢谢

Answer 2

我遇到了类似的问题。所以在这里报告我的解决方案可能是相关的。

我有一个图表，每次我点击一次加载数据按钮时都没有更新（第二次点击后我可以看到视觉变化）。

图形组件被设计为父组件（连接到 Redux 存储）的子组件，因此数据作为 prop 传递。

问题：数据已从商店（在父级中）正确获取，但图形组件（子级）似乎没有对它们做出反应。

解决方案：

  componentWillReceiveProps(nextProps) {
     this.props = null;
     this.props = nextProps;
     // call any method here   
  }

希望能以某种方式做出贡献。

React 组件视图没有得到更新

React component view does not get update

javascript

node.js

reactjs