Как обновить состояние реагирующего компонента из другого файла?

Question

В моем приложении у меня есть текст и список, использующий реагирующую виртуализацию для рендеринга большого списка элементов, каждый из которых имеет подробное описание некоторых слов в тексте.Работает очень хорошо, но мне нужно, когда я нажимаю на область в тексте, список, который будет перерисован так, что соответствующий элемент будет отображаться

class VirtualizedList extends Component{
  constructor(props) {
    super(props);
    this.state = {
      scrollToIndex: 0
    };
    this.renderItem = this.renderItem.bind(this);
    this.scrollToIndex = this.scrollToIndex.bind(this);
  }

renderItem ({
  key = this.props.data[index].key,
  index,
  parent,
  style,
  itemToRender = this.props.data[index]
}) {
  return (
    <CellMeasurer 
    cache={cache}
    columnIndex={0}
    key={key}
    parent={parent}
    rowIndex={index}
  >
      <div
        style={style}
      >
        {index}
        {itemToRender}
      </div>

      </CellMeasurer>
  )
}
scrollToIndex(index) {
    this.setState({
      scrollToIndex: index
    });
}

render() {    

return (      
  <AutoSizer>
      {
        ({ width, height }) => (
          <List
            width={width}
            height={height}
            rowCount={this.props.data.length}
            deferredMeasurementCache={cache}
            rowHeight={cache.rowHeight}
            rowRenderer={this.renderItem}
            scrollToIndex={this.state.scrollToIndex}
          />          
        )
      }
      </AutoSizer>
);
}
};

export default VirtualizedList;

в его родительском элементе, он называется так:

<VirtualizedList
    data={listItems} >     
</VirtualizedList>

Я создал метод scrollToIndex (), чтобы я мог вызывать его и обновлять состояние VirtualizedList и, таким образом, повторно отображать список до указанного индекса, но я получаю это предупреждение: setState (...): Может обновлять только смонтированный или монтируемый компонент ...

Я называю метод следующим образом (для прокрутки списка, включающего 10-й элемент):

const listInstance = new VirtualizedList;
      listInstance.scrollToIndex(9);

любая помощь или рекомендация покак реализовать это будет высоко ценится.спасибо!

Answer 1

const listInstance = new VirtualizedList; listInstance.scrollToIndex(9);

Вы не можете сделать это - это не будет тот же экземпляр, не отрисованный / смонтированный и т. Д.

Вам необходимо поднять состояние вверх - связаться с родителем.

Просто передайте scrollToIndex от родителя в качестве реквизита:

<VirtualizedList
  data={listItems}
  scrollToIndex={someSelectedIndexInParent}
/>

Вы можете использовать PureComponent

class VirtualizedList extends PureComponent{

, он будет перерисован при изменении реквизита.

конечно используйте this.props в <List

scrollToIndex={this.props.scrollToIndex}