Question

{
   selected.length == 2 
   ?
   <FlatList
   keyExtractor={item => "_" + item.id}
   renderItem={this.renderLastItem}
   data={subGroups}
   numColumns={1} /> 
   :
   <FlatList
   keyExtractor={item => "#" + item.id}
   renderItem={this.renderItem}
   data={subGroups}
   numColumns={2} />
}

在上面的代码行中，selected.length等于2时，出现以下错误：

Invariant Violation: Changing numColumns on the fly is not supported.

这是两个不同的列表，我没有更改numColumns。在我看来，React Native试图在所有条件下使用FlatList的同一对象。我该如何解决这个问题？

Answer 1

该问题已被提出并回答here。我不确定为什么会引发此错误。但是，由于在FlatList上实现了所有围绕渲染的优化，RN团队可能已决定抛出此错误。

如链接问题的答案中所述，您需要向FlatList添加密钥，以帮助React-Native在selected值更改时刷新组件。

您可以通过修改

{selected.length == 2 ?
<FlatList
   key={'_'}
   keyExtractor={item => "_" + item.id}
   renderItem={this.renderLastItem}
   data={subGroups}
   numColumns={1} /> 
   :
<FlatList
   key={'#'}
   keyExtractor={item => "#" + item.id}
   renderItem={this.renderItem}
   data={subGroups}
   numColumns={2} />
}

Github问题引发的问题与此https://github.com/facebook/react-native/issues/15944

类似

不变违规：不支持动态更改numColumns。我虽然没有改变

1 个答案: