Можно ли установить useState с переменной?

Question

С функциональным компонентом, использующим реагирующее setState, возможно ли, чтобы функция переключения использовала переменные аргумента для изменения состояния?

 const WhateverScreen = props => {
   const [showPieView, setShowPieView] = useState(false);
   const [showPizzaView, setShowPizzaView] = useState(false);
   const [showBurgerView, setShowBurgerView] = useState(false);

  const toggleView = (value) => {
      const stateData = "show" + value;
      const setStateData = "setShow" + value;
      if(stateData === true) {
         setStateData(false);
       } else {
        setStateData(true)
       };
      };

Затем при рендеринге:

 <TouchableOpacity onPress={() => {toggleView("Pizza")}} >
     <Ionicons name="ios-information-circle" size={40} color={"green"} />
  </TouchableOpacity>

 {showPizzaView ?
      <View >
        <Text>I like Pizza!!!</Text>
        <Image source={require("../images/pizza.jpg")} style= {height: 100, width: 100}/>
      </View> : null}
 }

Я могу просто написать набор функций для каждого Touchable элемента, но затем DRY, верно?

Answer 1

Если вы действительно хотите получить доступ к каждой функции по имени, вы можете добавить каждого диспетчера к объекту:

// rest of code
const [showPieView, setShowPieView] = useState(false);
const [showPizzaView, setShowPizzaView] = useState(false);
const [showBurgerView, setShowBurgerView] = useState(false);

const setShowView = {
  setShowPieView: setShowPieView,
  setShowPizzaView: setShowPizzaView,
  setShowBurgerView: setShowBurgerView
};
// rest of code

Тогда ваш setStateData будет const setStateData = setShowView["setShow" + value;], иостальная часть вашего кода будет работать как есть (PS: я не проверял это, в основном пытаясь проиллюстрировать идею (^^,).