为什么React Native FlatList样式不会随状态更改

Question

我有一些标签。我想更改所选标签的颜色。我为选定的标签索引创建了一个状态，该状态将保存标签ID。按下Tab键时，所选状态将更改为按下的Tab键ID。我正在将所选状态与标签ID进行比较。如果两者相等，则所选标签将具有一些不同的样式。

但是当状态更改且条件为true时，所选选项卡不会更改其状态。 为什么状态更改不会触发样式中的比较以更新样式？

<FlatList 
  horizontal
  data={this.state.drinkgroup}
  showsHorizontalScrollIndicator={false}
  renderItem={({item, index}) =>
  {
    return  <Tab 
      item={item} 
      selected={this.state.selected}           
      changeSelected={
        () => {
          this.setState({selected: item.id}, function(){                       console.log(this.state.selected, item.id)
          console.log(this.state.selected==item.id)
          })
        }} 
      }
  }
/>

export const Tab = ({item, selected, changeSelected}) => {
    return (
        <TouchableOpacity
            style={[styles.tabStyle, (selected==item.id)? styles.tabSelectedStyle: null]}
            onPress={changeSelected}
            underlayColor='#fff'
        >
            <Text style={{color: '#f2f2f2', textAlign: 'center', fontSize: 15}}>{item.name}</Text>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    tabStyle: {
        backgroundColor: '#800080',
        height: 32,
        paddingRight: 15,
        paddingLeft: 15
    },
    tabSelectedStyle: {
        borderBottomColor: 'white', 
        borderBottomWidth: 3
    }
})

Answer 1

通过将extraData = {this.state}传递给FlatList，我们确保当state.selected更改时FlatList本身将重新呈现。如果不设置此道具，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且道具比较不会显示任何更改。

<FlatList
   data={this.props.data}
   extraData={this.state}
   keyExtractor={this._keyExtractor}
   renderItem={this._renderItem}
  />

这是一个PureComponent，这意味着如果props保持浅且相等，它将不会重新渲染。

请确保您的renderItem函数所依赖的所有内容均作为更新后不是===的道具（例如extraData）传递，否则您的UI可能不会根据更改进行更新。

这包括数据属性和父组件状态。

更多详细信息：-FlatList

Answer 2

如果要重新呈现其项目，则需要向Flatlist提供extraData道具。您可以像extraData={this.state}那样做。

通过将extraData={this.state}传递给FlatList，我们确保FlatList本身将在state.selected更改时重新呈现。如果不设置此extraData道具，FlatList将不知道它需要重新渲染任何项目，因为它也是PureComponent，并且道具比较不会显示任何更改。 有关更多详细信息，您可以访问official documentation here