Javascript 如何更改项目'；在平面列表中在“后”处呈现的s样式；触摸“；信息技术

我想在平面列表中更改项目的样式，如颜色或字体大小，我检查了一些问题，如或，但它们在我的代码中不起作用。如果我使用循环而不是平面列表，我可以成功地更改项目的样式

这是我的密码

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>

    )
}

让jobCategory=[
{
“id”：“a”，
“名称”：“1”，
},
{
“id”：“b”，
“名称”：“2”，
},
{
“id”：“c”，
“名称”：“3”，
},
{
“id”：“d”，
“名称”：“4”，
},
{
“id”：“e”，
“名称”：“5”，
},
{
“id”：“f”，
“名称”：“6”，
},
]
const styles=StyleSheet.create({
类别未选择样式：{
填充顶：pxToDp（25），
填充底部：pxToDp（25），
填充右侧：pxToDp（30），
填充左：pxToDp（30），
背景颜色：'#f4f6f7'，
},
类别所选样式：{
背景颜色：“白色”，
},
CategoryTextSelectedStyle：{
颜色：“#666666”，
字体大小：pxToDp（28）
},
categoryTextselectedStyle：{
颜色：“浅蓝色”，
字体大小：pxToDp（40），
},
});
const JobExpectPage=（道具）=>{
常量[categorySelected，setCategorySelected]=useState（“”）
const renderJobCategory=（{item}）=>{
返回(
setCategorySelected（item.id）}
style={[style.categoryUnselectedStyle，categorySelected==item.id&&style.categoryselectedStyle]}
>
{item.name}
)
}
返回(
这里的问题是，由于
数组jobCategory
总是相同的，所以扁平列表没有重新排序

您必须将属性extraData添加到flatlist并传递categorySelected挂钩，这样flatlist就会知道，当categorySelected更改时，它必须重新渲染，如下所示：

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

    )

返回(
但是renderJobCategory函数在每次调用setCategorySelected后都会更改。因此，即使没有extraData字段，它也应该可以工作。