reactjs - React 组件在调整大小/重新渲染时会重复，即使它们具有唯一的键

Question

您能否告知我的代码（https://codesandbox.io/s/x2q89v613o）中缺少的内容，即使我已为它们分配了唯一键，也会在调整大小时创建组件的副本？项目是简单的调度表，每个单元格都是一个组件，事件也是一个组件。使用 React 拖放增加了一些复杂性 .. 是不是使用 HOC 包装器会使 React 无法识别现有元素？

谢谢！！VB

Answer 1

下面的行导致了问题

tableWidth: ReactDOM.findDOMNode(this._tableTarget).offsetWidth

offsetWidth会随着屏幕尺寸的变化而变化，因此会创建一个副本。

删除它并尝试。

tableWidth: "auto"

或者

tableWidth: "100%"

Answer 2

componentWillReceiveProps在下面添加你的WeekView，我已经添加了一行 cell.events= [];。这是清除所有以前的事件并添加新的道具。

componentWillReceiveProps(nextProps) {
    if (nextProps.events && nextProps.events.length) {
      console.log("weekView componentWillReceiveProp got events");

      this.state.cells.forEach(cell=>{
        cell.events= [];
      });

      nextProps.events.forEach(x => {
        const start = x.start;

        const cellId = "c" + "_" + moment(start).valueOf();

        const target = Helper.getItemFromArray(this.state.cells, cellId, "id");

        if (target) {
          console.log("found");

          target.events.push(x);
        }
      });

      console.log(
        this.state.cells.filter(x => {
          if (x.events.length > 0) return x;
        })
      );
    }
  }