Question

在我的应用程序中，我有一个文本和一个列表，该列表使用react-virtualized来渲染大量项目，每个项目都有关于文本中某些单词的详细说明。效果很好，但是我需要的是当我单击文本中的某个区域时，要重新渲染的列表，以便显示相应的项目

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);

您不能那样做-这不会是同一个实例，不会进行渲染/挂载等。

您需要lift state up-由父母沟通。

只需将scrollToIndex从父母那里传递为道具：

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

您可以使用PureComponent

class VirtualizedList extends PureComponent{

它将在道具更改时重新呈现。

当然要在this.props中使用<List

scrollToIndex={this.props.scrollToIndex}

如何从另一个文件更新React组件的状态？

1 个答案: