reactjs - 即使数据没有改变，我也可以使用 setState 强制重新渲染吗？我的 GUI 不会更新？

Question

所以我现在遇到的问题是第一次点击时，我的 GUI 重新呈现。但是在第二次点击时，它不会重新呈现。我相信这是因为我没有更新我的渲染通过“graphicLayers.map”绑定(bind)的“graphicLayers”的状态。无论如何，这就是我的理论(即使它适用于第一次点击？但不是第二次点击或之后的任何东西)。

我尝试强制更新 graphicLayers 的 setState，但它似乎不起作用。像这样:

let graphicLayersCopy = Object.assign([], this.state.graphicLayers);
this.setState({graphicLayers: graphicLayersCopy});

但这行不通。我通过调试器知道它正在正确设置数据，如果我刷新(它保存状态并重新加载状态)，则 GUI 会正确呈现。

有没有办法强制重新渲染一个变量，即使它没有改变值？

构造函数

constructor(props, context) {
    super(props, context);

    this.state = {
      graphicLayers: [id1, id2, id3],
      graphicLayersById: {
        id1: { ... },
        id2: { ... },
        id3: { ... }
      }

    this.addLayerClick = this.addLayerClick.bind(this);
};

渲染

render() {
    return (        
    <div>
      {this.state.graphicLayers.map((id) =>
        <GraphicLayer addLayerClick={this.addLayerClick.bind(this)} />
      )}
    </div>
    );
   }

添加图层点击

addLayerClick() {
  ... change some property in graphicLayersById dictionary ...
  self.setState({ graphicLayersById: newDataHere });
}

编辑:我发现了我这边的问题，这里没有准确显示。

所以我的 addLayerClick() 实际上调用了另一个正在监听调用的函数，并在其中设置了状态。这很奇怪，因为在回调函数中调用了 setState，但我通过将 setState 放在 addLayerClick() 本身中来让它工作。仍然不知道为什么这不起作用，但我至少会支持你们所有人

listenFunction() {

let self = this;

this.firebaseWrapper.storage.on('graphicLayersById', function (save) {
  if (save) {
    self.setState({ graphicLayersById: save });  // FOR SOME REASON THIS DOESN'T UPDATE THE GUI THE 2nd CLICK.  The data is correct though and I see it going here on a breakpoint, but GUI won't update unless I setState in the actual button
  }
  else {
    self.setState({ graphicLayersById: undefined });
  }
});

Answer 1

在 addLayerClick() 中，您仅更新 graphicLayersById，但渲染取决于 graphicLayers。您还应该更新 addLayerClick() 中的 graphicLayers 状态。

addLayerClick() {
  this.setState({
    graphicLayers: ...
    graphicLayersById: ....
  });
}

附带说明一下，您不应该在 render() 中绑定(bind)方法，因为这会在每次渲染时创建一个全新的函数(并且可能会影响性能)。而不是

<GraphicLayer addLayerClick={this.addLayerClick.bind(this)} />

做

<GraphicLayer addLayerClick={this.addLayerClick} />

并将绑定(bind)保留在您的构造函数中(按照您已有的方式)。