以常规方式更改函数内部组件的颜色

Question

我有下一个组件：

const DetailsInformation = () => {
const [details, setDetails] = useState(null)

useEffect(()=>{
getDetails()
}, [])

const getDetails = async () => {
await getData().then((details)=>{
details.forEach((detail)=>{
detail.posibles_valores.forEach((valor)=>{
valor.selected = false
})
})
setDetails(filteredDetails)
})
}
const getIconColor = (value) => {
if(!value) return 'grey';
return  Colors.primary
} 
const updateDetail = (nombre_detalle, detalle) => {
let detailToUpdateIndex = details.findIndex(det => det.nombre.toLowerCase() == detalle.toLowerCase())
let innerDetailToUpdateIndex = details[detailToUpdateIndex].posibles_valores.findIndex(valor => valor.valor_detalle.toLowerCase() == nombre_detalle.toLowerCase())
let updatedDetails = details;
updatedDetails[detailToUpdateIndex].posibles_valores[innerDetailToUpdateIndex].selected = !updatedDetails[detailToUpdateIndex].posibles_valores[innerDetailToUpdateIndex].selected
updatedDetails[detailToUpdateIndex].posibles_valores[innerDetailToUpdateIndex].color = getIconColor(!updatedDetails[detailToUpdateIndex].posibles_valores[innerDetailToUpdateIndex].selected)

setDetails(updatedDetails)
}
const generateDetailValues = (detail) => {
let detailSelected = details.find(det => det.nombre.toLowerCase() == detail.toLowerCase())
return (<View>
{detailSelected.posibles_valores.map((detalle, index)=>(
<TouchableWithoutFeedback key={detalle.valor_detalle} onPress={()=>{updateDetail(detalle.valor_detalle, detail, index)}}>
<View  style={{justifyContent:'space-between', marginHorizontal:30, alignItems:'center',   flex:1, flexDirection:'row'}}>
<Text bold style={{fontSize:18, marginVertical:2, marginHorizontal:8, textAlign:'center'}}>{detalle.valor_detalle}</Text>
<Icon type='AntDesign' name='checkcircle' style={{fontSize: 20, color:detalle.color}}/>
</View>
</TouchableWithoutFeedback>
))}
</View>)
}
return (
<View>
<Text>List One</Text>
<View>
{ details && generateDetailValues('list_one', details)}
</View>
<Text>List two</Text>
<View>
{details && generateDetailValues('list_two', details)}
</View>
</View>
)
}

总之，我进行了一个API调用，之后，我呈现由；generateDetailValues"；，这个部件有一个"；onPress"；更改组件内部图标颜色的功能。

问题是当我按下可触摸的按钮时；细节"；改变，但颜色没有，那是因为；generateDetailValues"；未执行。

任何我如何使该函数执行(在render方法中(的想法；细节"；改变

提前谢谢。

Answer 1

getIconColor总是返回Colors.primary，无论您将什么值传递到函数中，我想这就是为什么颜色永远不会改变的原因。

我不知道你的Color对象是如何工作的，但它似乎在某种程度上取决于值，例如：

const getIconColor = (value) => {
if(!value) return 'grey';
return  Colors.value.primary
}