WIP: Moving off of react-virtualized to react-window #467
Conversation
wuweiweiwu
changed the title
|
I will try to look on it, but not sure when I will have time... |
| rowRenderer={({ index, style: rowStyle }) => | ||
| {...reactVirtualizedListProps} | ||
| > | ||
| {({ index, style: rowStyle }) => |
There was a problem hiding this comment.
This is the issue. It creates new function every render and so every row is mounted and unmounted. You should extract it to extra function and give here only reference to that function so it remains always same.
E.g.
this._render = this._render .bind(this); // in constructor
...
_render({ index, style: rowStyle }) {
const {
getNodeKey,
} = mergeTheme(this.props);
const {
searchMatches,
draggedNode,
draggedDepth,
draggedMinimumTreeIndex,
instanceProps,
} = this.state;
const treeData = this.state.draggingTreeData || instanceProps.treeData;
let rows;
let swapFrom = null;
let swapLength = null;
if (draggedNode && draggedMinimumTreeIndex !== null) {
const addedResult = memoizedInsertNode({
treeData,
newNode: draggedNode,
depth: draggedDepth,
minimumTreeIndex: draggedMinimumTreeIndex,
expandParent: true,
getNodeKey,
});
const swapTo = draggedMinimumTreeIndex;
swapFrom = addedResult.treeIndex;
swapLength = 1 + memoizedGetDescendantCount({ node: draggedNode });
rows = slideRows(
this.getRows(addedResult.treeData),
swapFrom,
swapTo,
swapLength
);
} else {
rows = this.getRows(treeData);
}
const matchKeys = {};
searchMatches.forEach(({ path }, i) => {
matchKeys[path[path.length - 1]] = i;
});
return this.renderRow(rows[index], {
listIndex: index,
style: rowStyle,
getPrevRow: () => rows[index - 1] || null,
matchKeys,
swapFrom,
swapDepth: draggedDepth,
swapLength,
})
}
...
{this._render} // here
Should be good to refactor this so there is not much extra computations...
There was a problem hiding this comment.
But I would also consider it bug in react-dnd, but it is a question if it gets addressed anytime soon ...
https://github.com/react-dnd/react-dnd/search?q=Expected+to+find+a+valid+target&type=Issues
| }} | ||
| height={height} | ||
| style={innerStyle} | ||
| rowCount={rows.length} | ||
| estimatedRowSize={ | ||
| itemCount={rows.length} |
There was a problem hiding this comment.
I would also add
itemKey={(index) => getNodeKey(rows[index])}
|
I have this similar error when dragging from one tree to another. It occurs after dropping on 2nd tree and does not happen on every single node but happens most of the time.
|
|
had the same problem, take a look at this issue - |
closes: #425
dependent on frontend-collective-react-dnd-scrollzone supporting refs to the inner component frontend-collective/frontend-collective-react-dnd-scrollzone#7
currently running into some invariant issues idk. but stuff mostly works.
@dolezel not really sure what the invariant issue is. It happens when you drag to to the left of the root. Not as familiar with react-dnd :\