Как изменить стиль элемента, отображаемый в FlatList после «прикосновения» к нему?

Question

Я хочу изменить стиль элемента, такой как color или fontSize в FlatList, я проверил некоторые вопросы, такие как этот или этот , но они не работают в моем коде,Если я использую цикл вместо FlatList, я могу успешно изменить стиль элемента ..

Вот мой код

let jobCategory= [
    {
        "id": "a",
        "name": "1",
    },
    {
        "id": "b",
        "name": "2",
    },
    {
        "id": "c",
        "name": "3",
    },
    {
        "id": "d",
        "name": "4",
    },
    {
        "id": "e",
        "name": "5",
    },
    {
        "id": "f",
        "name": "6",
    },
]


const styles = StyleSheet.create({
    categoryUnselectedStyle: {
        paddingTop: pxToDp(25),
        paddingBottom: pxToDp(25),
        paddingRight: pxToDp(30),
        paddingLeft: pxToDp(30),
        backgroundColor: '#f4f6f7',
    },
    categoryselectedStyle: {
        backgroundColor: 'white',
    },
    categoryTextUnselectedStyle: {
        color: '#666666',
        fontSize: pxToDp(28)
    },
    categoryTextselectedStyle: {
        color: 'lightblue',
        fontSize: pxToDp(40),
    },
});


const JobExpectPage = (props) => { 
    const [categorySelected, setCategorySelected] = useState("")


        const renderJobCategory = ({ item }) => {
        return (
            <TouchableOpacity
                key={item.id}
                onPress={() => setCategorySelected(item.id)}
                style={[styles.categoryUnselectedStyle, categorySelected == item.id && styles.categoryselectedStyle]}
            >
                <View>
                    <Text style={[styles.categoryTextUnselectedStyle, categorySelected == item.id && styles.categoryTextselectedStyle]}> {item.name}</Text>
                </View>
            </TouchableOpacity>
        )
    }




    return (
        <View> 
            <FlatList 
                data={jobCategory}
                renderItem={renderJobCategory}

        </View>

    )
}

Надеюсь, после нажатия элемента его стиль изменится.Я уже преуспел без FlatList, как я могу сделать это с FlatList?

Answer 1

Проблема здесь в том, что плоский список не перерисовывается, так как array jobCategory всегда одинаков.

Необходимо добавить свойство extraData в плоский список и передать хук categorySelected, чтобы плоский список знал, чтокогда categorySelected изменяется, он должен перерисоваться, сделайте это следующим образом:

 return (
        <View> 
            <FlatList 
                data={jobCategory}
                renderItem={renderJobCategory}
                extraData={categorySelected}
        </View>

    )

Передав extraData = {categorySelected в FlatList, мы гарантируем, что сам FlatList будет повторно визуализироваться при изменении categorySelected.Без установки этого реквизита FlatList не знал бы, что ему нужно повторно визуализировать какие-либо элементы, поскольку он также является PureComponent, и сравнение реквизитов не покажет никаких изменений.