Реактивизированный стиль списка Выбранный элемент срабатывает только при прокрутке вверх

Question

Я использую React-virtualized для отображения данных в виде списка. Я добавляю выбранный стиль для элемента списка, он предполагает выделение элемента после его щелчка. Текущая проблема - onClick, но выбранный стиль отображается только при прокрутке списка вверх.

List component

 <div className={styles.autoSizerContainer}>
                <AutoSizer>
                    {({width, height}) => {
                        // Selected customer styling only fire after scroll
                        return (
                            <List
                                width={width}
                                height={height}
                                rowHeight={50}  
                                rowRenderer={this.renderRow}
                                rowCount={rowCount}
                                overscanRowCount={3}    
                                className={styles.list}
                            />
                        )
                    }}
                </AutoSizer>
            </div>

List item

private renderRow = ({index, key, style}: ListRowProps) => {
        const data = this.props.dataList[index];
        return (
            <div style={style} key={data.id}>
                <div className={styles.listItem}>
                    <div>data.name</div>
                    <Item key={data.id} 
                         isDataSelected={this.state.selectedId === data.id}
                    /> //return true will show selected styling
                </div>
            </div>
        )
    };

"react-virtualized": "^9.21.0",

"react": "^16.8.4"

Любые идеи приветствуются!

Спасибо !!!

Answer 1

React-Virtualized выполнит повторную визуализацию вашего компонента только при изменении одного из реквизитов, предоставленных ListRowProps. Он не знает, что ваш метод рендеринга использует this.props.dataList и this.state.selectedId внутри. Вам нужно будет сделать одну из двух вещей.

1. Явно скажите, чтобы список перерисовывался при изменении this.state.selectedId. Для этого в списке выставлен API.

2. Используйте что-то вроде API контекста React для предоставления необходимых данных таким образом, чтобы изменения могли быть обнаружены. Примерно так должно работать:

const {Provider, Consumer} = React.createContext<number | null>(null);

 <div className={styles.autoSizerContainer}>
                <AutoSizer>
                    {({width, height}) => {
                        // Selected customer styling only fire after scroll
                        return (
                            <Provider value={this.state.selectedId}>
                            <List
                                width={width}
                                height={height}
                                rowHeight={50}  
                                rowRenderer={this.renderRow}
                                rowCount={rowCount}
                                overscanRowCount={3}    
                                className={styles.list}
                            />
                            </Provider>
                        )
                    }}
                </AutoSizer>
            </div>

private renderRow = ({index, key, style}: ListRowProps) => {
        const data = this.props.dataList[index];
        return (
            <Consumer>
            {(selectedId) =>
            <div style={style} key={data.id}>
                <div className={styles.listItem}>
                    <div>data.name</div>
                    <Item key={data.id} 
                         isDataSelected={selectedId === data.id}
                    /> //return true will show selected styling
                </div>
            </div>
            }
            </Consumer>
        )
    };