reactjs - 即使数据未更改，我也可以使用setState强制重新渲染吗？我的GUI无法更新

所以我现在遇到的问题是在第一次单击时，我的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

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 });
  }
});

}

最佳答案

在addLayerClick()中，您仅更新graphicLayersById，但是呈现方式取决于 graphicLayers 。您还应该在graphicLayers中更新addLayerClick()状态。

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

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

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

做

<GraphicLayer addLayerClick={this.addLayerClick} />

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