Question

在我的应用程序内部，我有一个如下组件：

import React, {Component} from 'react'
import {View, Text, FlatList, TouchableOpacity} from 'react-native'

export default class Screen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: null
        }
    }

    renderText(item, index) {
        return (
            <TouchableOpacity
                style={{
                    borderWidth: 1, 
                    borderColor: '#bbbbbb', 
                    backgroundColor: this.state.selected == index ? 'blue' : 'white',
                    marginTop: index == 0 ? 0 : 10
                }}
                onPress={() => {
                    this.setState({selected: index})
                }}
            >
                <Text style={{padding: 10}}>{item.text}</Text>
            </TouchableOpacity>
        )
    }

    renderArray() {
        return (
            <FlatList 
                data={this.props.data}
                renderItem={({item, index}) => this.renderText(item, index)}
                keyExtractor={(item, index) => index.toString()}
            />
        )

    }

    render() {
        return (
            <View style={{margin: 10}}>
                {this.renderArray()}
            </View>
        )
    }
}

如您所见，我正在渲染FlatList，对于数组中的每个项目，Text中都有一个TouchableOpacity组件。当您单击每个项目时，this.setState({selected: index})会将selected中的state设置为该项目的索引。 this.state.selected与TouchableOpacity的样式有关，我希望单击某个项目时其背景会变成蓝色，但这没有发生，并且根本没有颜色变化。如果您能帮助我，我将不胜感激。

Answer 1

原因是FlatList仅在this.props.data更改时才重新渲染。您需要“提示”它，以同时监视this.state的更改。为此，请在FlatList上设置extraData={this.state}。参见https://facebook.github.io/react-native/docs/flatlist

Answer 2

      <FlatList 
            data={this.props.data}
            renderItem={({item, index}) => this.renderText(item, index)}
            keyExtractor={(item, index) => index.toString()}
            extraData={this.state}
        />

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

更改状态后组件未更新

2 个答案: