Передача функции внутри компонента без состояния не работает

Question

Я пытаюсь использовать функцию внутри своего компонента без состояния. Но он не работает должным образом.

const selectedColor = function ({color}) {
    switch (color) {
        case 'green':
            return styles.green;
            break;
        case 'blue':
            return styles.blue;
            break;
        case 'red':
            return styles.red;
            break;
        default:
            Alert.alert("Undefined Color!");
    }
}
const LightBulb = ({isLit, lightColor}) => {



    return (
        <View
            style={[isLit ? selectedColor(lightColor) : styles.green, {alignSelf: 'stretch'}]}>
            <Text>{isLit ? 'ON' : 'OFF'}</Text>
        </View>
    );


}

---

Когда isLit истинно, selectedColor(lightColor) должен срабатывать. И как только он запускается, даже lightColor является одним из значений жадности, красного или синего, он переходит к Alert. Вы можете объяснить, почему это происходит? И может ли кто-нибудь дать мне правильный способ сделать это?

Answer 1

Я внес несколько изменений в ваш код, и теперь он работает. Демо здесь.

https://snack.expo.io/@waheed25 / smile-carrot

или вот код, который выполняется, вам просто нужно передать свой цвет в свою функцию, и он будет показан.

import { View, Text } from 'react-native'
import React, {useState} from 'react'

const App =()=>{
  const [isLit, setIsLit] = useState(true)
const selectedColor = (color)=> {
  console.log('color:', color)
    switch (color) {
        case 'green':
            return {backgroundColor: 'green'};
        case 'blue':
            return {backgroundColor: 'blue'};
        case 'red':
            return {backgroundColor: 'red'};
        default:
            Alert.alert("Undefined Color!");
    }
}
    return (
        <View
            style={[isLit ? selectedColor('red') : {backgroundColor: 'green'}, {alignSelf: 'stretch', height: 200}]}>
            <Text>{isLit ? 'ON' : 'OFF'}</Text>
        </View>
    );

}

export default App;

Answer 2

Когда я удаляю {} из {color}, он работает.