Question

我经常遇到动态组件无法直接相互更新。多个模型可以更新彼此的属性，但不会更新其视图。

model2View.onClick=() {
  model1.change;
  model1View.forceUpdate();
}

我经常使用回调函数放入混合中，这只是一个更新模型的包装器，并在更改后强制更新开销视图。

当模型更新是更新多个模型的模型边函数时会变得更糟，在这种情况下，我一直在使用最近的祖先视图来执行forceupdate。

model2View.onClick=() {
   the following 3 could be wrapped in one method on model1
  model1.change;
  model2.change;
  model3.change;

  modelsWrapperView.forceUpdate();
}

经过多次强制更新后，我只是想知道这是否意味着使用反应或者我错过了什么。

以下是我试图解决的问题的简化示例：

https://jsfiddle.net/x3azn/ann6qb30/1/

Answer 1

您正在尝试改变属于您所在州的对象，而React不会重新渲染，因为它不知道某些内容已发生变化。这就是您需要拨打forceUpdate的原因。

您应该将状态视为不可变状态，并使用setState更新状态（updated demo）：

class TransformersApp extends React.Component {
  toggleDeception() {

    // Create a new object rather than mutating the existing one.
    var newTransformer = Object.assign({}, this.state.transformer, {
      isDecepticon: !this.state.transformer.isDecepticon
    });

    // Update the state.
    this.setState({
      transformer: newTransformer
    });
  }
}

setState的文档明确了这一点：

从不直接改变this.state，因为之后调用setState()可能会取代您所做的突变。将this.state视为不可变。

您可能会发现使用Immutable.Map之类的东西作为您的状态对象会有所帮助，因为这会阻止您改变状态。

如何让不同的反应组件共享并承认彼此的状态？

1 个答案: