bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data
http://bvaughn.github.io/react-virtualized/
MIT License
26.44k stars 3.06k forks source link

Tiptap Any input or mouse click event triggers the rowRenderer function execution of the List component #1843

Closed yyyyyyyysssss closed 1 month ago

yyyyyyyysssss commented 3 months ago

version: "react-virtualized": "^9.22.5"

When a row is added to the List component by input, any input or mouse click event causes the rowRenderer function of the List component to execute repeatedly

Add a line:

    const sendMessage = () => {
        const json = editor.getJSON();
        const { content } = json;
        for (const item of content) {
            if (item.type === "image") {
                const dataUrl = item.attrs.src;
                const filename = item.attrs.title;
                const file = dataURLtoFile(dataUrl, filename);
                const msg = {
                   id: '5355234',
                    type: 'image',
                    name: '卡卡罗特',
                    content: dataUrl
                }
                chatContentAdd(msg);
            } else if (item.type === 'paragraph') {
                let content;
                if (!(content = item.content)) {
                    continue;
                }
                let textMessage = [];
                for (const c of content) {
                    if (c.type === 'text') {
                        textMessage.push(c.text);
                    } else if (c.type === 'hardBreak') {
                        textMessage.push('<br>');
                    }
                }
                const msg = {
                   id: '32131412',
                    type: 'text',
                    name: '贝吉塔',
                    content: textMessage.join("")
                }
                chatContentAdd(msg);
            }
        }
        editor.commands.clearContent();
        chatContentToLast();
    }

const chatContentAdd = (item) => {
        chatContentData.push(item);
        setChatContentData([...chatContentData]);
};

List component:

<AutoSizer>
  {({ height, width }) => {
    return (
      <VirtualizedList
        ref={chatContentRef}
        className='content-chat-list'
        width={width}
        height={height}
        rowCount={chatContentData.length}
        rowHeight={cache.current.rowHeight}
        deferredMeasurementCache={cache.current}
        rowRenderer={rowRenderer}
       onRowsRendered={handleRowsRendered}
     />
    );
  }}
</AutoSizer>

   const cache = React.useRef(
        new CellMeasurerCache({
            fixedWidth: true
        })
    );

    const rowRenderer = ({ index, key, parent, style }) => {
        const item = list[index]
        console.log('rowRenderer', index);
        return (
            <CellMeasurer
                key={key}
                cache={cache.current}
                columnCount={1}
                columnIndex={0}
                rowIndex={index}
                parent={parent}
            >
                {({ registerChild }) => (
                    <div key={item.id} className='chat-item' ref={registerChild} style={style}>
                        {renderItem(item)}
                    </div>
                )}

            </CellMeasurer>
        );
    };