我有一个包含特定数据的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会呈现组件吗?如何使用我遵循的方法实现。如果这对我没有帮助,我怎样才能实现我的目标。
答案 0 :(得分:1)
FlatList是一个纯粹的组件。它将根据传递给extraData
的内容重新呈现。所以,虽然你的州正在改变,但FlatList的extraData
应该改变了!我想,您可以转到extraData
,this.state
,事情会更新。