Блог

Я хочу получить доступ к свойству объекта внутри объекта, который я вызываю из файла активов :

 const services = {
    
    facebook: {
        name: "facebook",
        color: "#28A2F3"
    },
    spotify: {
        name: "spotify",
        color: "#42D778"
    }
    
  }

  module.exports = services
  

Мой компонент :

 export default function PasswordCard({icon, color}, props) {
    return (
        <View style={{
            padding: 20,
            backgroundColor: service[props.site].color,
            elevation: 2,
            borderRadius: 5,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-evenly",
            marginTop:5,
            marginBottom: 5,
        }}>
            <Icon style={styles.service} name={service[props.site].name} size={27} color="white" />
            <View style={styles.TextContainer}>
                <Text style={styles.Text}>k.adesida@provi.data</Text>
                <Text style={styles.Text}> 213 (0) 384639293</Text>
            </View>
            <TouchableHighlight style={styles.icon}>
                <BenjaminButton name="eye" size={22} color="white" />
            </TouchableHighlight>
        </View>
    )
}
  

Где я вызываю свой компонент с помощью реквизита, который я передаю :

 <View style={styles.CardContainer}>
   <PasswordCard site={"facebook"} />
   <PasswordCard site={"spotify"} />
</View>
  

Ошибка, которую я получил в любом случае :

 TypeError: undefined is not an object (evaluating 'service[props.site].color')
  

Но когда я пытаюсь получить доступ с помощью service.facebook.name здесь нет никакой ошибки.

Props всегда является первым параметром, поэтому при обращении к props в качестве второго параметра он будет неопределенным, и при его использовании вы получите указанную выше ошибку

Если вы измените свой компонент, как показано ниже

 function PasswordCard({icon, color,site}) {
  

И стили, подобные приведенным ниже

 backgroundColor: service[site].color,
  

Это будет работать.
Также вам следует изменить другие места, где вы ссылаетесь на это.