当状态中的数据被更改时组件不呈现React Native

时间:2018-03-23 11:47:11

标签: react-native

我有一个包含特定数据的ListView。当另一个动作发生时,我需要更新列表视图中一个项目的样式。我将变化存储在州内。但是组件没有被渲染。

export default class App extends Component {
constructor(props) {
  super(props);
  this.state = {
    loading: false,
    data: [],
    sectionlistData: Data["SearchList"],
    headers: this.GetHeaders(Data["SearchList"]),
    current: 'A'
};
}

someAction(){
   this.setState({
     current: info.viewableItems[0].section.title+""
    })
}

render() {
return (
  <View style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 25 }}>
    // some code   
    <View style={styles.contentListView}>
    <FlatList
        style={styles.alphabeticView}
        data={this.state.headers}
        renderItem={({item}) => <Text style={this.state.current===item.key ? 
            styles.alphabetsHighlight : styles.alphabets} onPress= 
            {this.GetListItem.bind(this, item)} >{item.key}</Text>}
    />
    </View>
  </View>
);
}
}
const styles = StyleSheet.create({
alphabets:{
 textAlign: 'right',
 paddingRight: 10,
 height: 15,
 color: '#005B9A',
 backgroundColor: 'transparent',
},
alphabetsHighlight:{
 textAlign: 'right',
 paddingRight: 10,
 height: 15,
 fontWeight: 'bold',
 color: '#005B9A',
 backgroundColor: 'transparent',
}
});

在代码中,我使用状态切换样式,但是当我更新状态时,它不会重新渲染。我会做正确的方法吗?在CSS类中使用状态数据时,react会呈现组件吗?如何使用我遵循的方法实现。如果这对我没有帮助,我怎样才能实现我的目标。

1 个答案:

答案 0 :(得分:1)

FlatList是一个纯粹的组件。它将根据传递给extraData的内容重新呈现。所以,虽然你的州正在改变,但FlatList的extraData应该改变了!我想,您可以转到extraDatathis.state,事情会更新。