Обновление списка React Virtualized на основе событий

Question

В моем приложении «Реакция редукса» я использую «React-virtualized» для рендеринга моей таблицы (столбцы: «Изображение», «Имя пользователя», «Время», «Состояние», «Тип»), которая содержит 3000 строк. Данные (объект) для рендеринга, которые я получаю во времяначальный рендеринг из вызова ajax (возвращает идентификатор, изображение, имя пользователя, время, состояние, тип как объект), но таблица должна быть обновлена ​​(если требуется) на основе события, полученного для обновления параметра для любой конкретной строки (1 или несколькострок), например: для идентификатора строки: 500, статус изменен с готовности на ожидание) я хочу перерисовать только эту конкретную строку (идентификатор: 500), а не всю таблицу.Как мне этого добиться?Я получаю событие как: eventObj = {"id": ID, "status": Wait} Я добавил идентификатор к своему

во время рендеринга при получении данных из вызова ajax, чтобы при получении события для обновления я могнайти объект в списке по его идентификатору.Я новичок в React, и если мое понимание правильное, реагирует на все заново, когда происходит изменение в состоянии.Любые предложения / предложения будут высоко оценены.

/* My rowRenderer Method*/
        rowRenderer = ({key, index, isScrolling, isVisible, style}) => {
        let obj = this.props.currentList[index];
        return (

<li key={key} style={style} id={obj.ID} ref={obj.ID}  >
                            <input type="checkbox" name="obj-list-index" id={"row-" + obj.ID} value={index}/>
                            <label for={"row-" + obj.ID} className="list-row">
                                <span className="user-icon">
                                    <i className={"job-row-img-default " +
                                    (this.fnGetobjImageType(obj.Name, obj.ID))}></i>
                            </span>
                                <span className="user-name">{this.fnGetUserName(obj)} </span>
                                <span className="time">{getTime(obj.DateTime)}</span>
                                <span className="status">{getStatus(obj.status)}</span>
                                <span className="type">{obj.type}</span>

                        </li> 

        render () {
        console.log("List:: render")
        return (
                <div id="content">
                            <li className="table-row">
                                <span className="user-icon">&nbsp;</span>
                                <span className="user-name >User Name</span>
                                <span className="time " >Date,Time</span>
                                <span className="status " >Status</span>
                                <span className="type ">Type</span>
                            </li>
                        </ul>
                        <div id="list-content"
                             className="table-scrollbar  up-arrow-notavailable down-arrow-notavailable">
                            <ul id="table-body" >
                                <List
                                        width={800}
                                        height={250}
                                        ref="list"
                                        className=""
                                        rowCount={this.props.total > 5 ? this.props.total : 5}
                                        rowHeight={35}
                                        overscanRowCount={2}
                                        rowRenderer={this.rowRenderer}
                                />
                            </ul>
                        </div>
                    </div>

                </div>
        )
    }

}