组件在状态中的数据更改时不显示React Native(Component not rendering when the data in the state is changed React Nati

组件在状态中的数据更改时不显示React Native(Component not rendering when the data in the state is changed 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类中使用状态数据时，反应是否呈现组件？ 我如何使用我所遵循的方法来实现。 如果这不能帮助我，我该如何实现我所期待的。

I have a ListView with specific data. I need to update the style of one item in a list view when another action has happened. I am storing the change in the state. But the component is not being rendered.

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', } });

Here in the code, I am toggling the styles using the state, but When I update the state it is not re-rendering. Am I going doing the correct way? Does the react renders the component when the state data is used in CSS class? How can I achieve using the method I am following. If this does not help me how can I achieve what I am looking for.

最满意答案

FlatList是一个纯粹的组件。 它将根据传递给extraData的内容重新呈现。 所以，尽管你的状态正在改变，FlatList的extraData应该会改变！ 我想，你可以传递给extraData ， this.state ，事情会更新得很好。

FlatList is a pure component. It will re-render based on the content of what is passed to extraData. So, although your state is changing, the FlatList's extraData should change! I think, you can just pass to extraData, this.state and things will update just fine.