React 组件在 resize/re-render 上重复，即使它们具有唯一键

Question

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

谢谢！！ VB

Answer 1

下面一行导致了问题

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

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

删除它并尝试。

tableWidth: "auto"

或

tableWidth: "100%"

Answer 2

在 WeekView 的下方添加您的 componentWillReceiveProps，我添加了一行 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;
        })
      );
    }
  }

React 组件在 resize/re-render 上重复，即使它们具有唯一键

React components get duplicated on resize/re-render even though they have unique keys

resize

reactjs