React 组件在 resize/re-render 上重复,即使它们具有唯一键
React components get duplicated on resize/re-render even though they have unique keys
您能否告知我的代码 (https://codesandbox.io/s/x2q89v613o) 中缺少什么导致在调整大小时创建组件副本,即使我已经为它们分配了唯一键?
Project 是一个简单的调度程序 table,每个单元格都是一个组件,事件也是一个组件。使用 React 拖放会增加一些复杂性.. 会不会是使用 HOC 包装器使 React 无法识别现有元素?
谢谢!!
VB
下面一行导致了问题
tableWidth: ReactDOM.findDOMNode(this._tableTarget).offsetWidth
offsetWidth 随屏幕尺寸变化而变化,因此创建一个副本。
删除它并尝试。
tableWidth: "auto"
或
tableWidth: "100%"
在 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;
})
);
}
}
您能否告知我的代码 (https://codesandbox.io/s/x2q89v613o) 中缺少什么导致在调整大小时创建组件副本,即使我已经为它们分配了唯一键? Project 是一个简单的调度程序 table,每个单元格都是一个组件,事件也是一个组件。使用 React 拖放会增加一些复杂性.. 会不会是使用 HOC 包装器使 React 无法识别现有元素?
谢谢!! VB
下面一行导致了问题
tableWidth: ReactDOM.findDOMNode(this._tableTarget).offsetWidth
offsetWidth 随屏幕尺寸变化而变化,因此创建一个副本。
删除它并尝试。
tableWidth: "auto"
或
tableWidth: "100%"
在 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;
})
);
}
}