Как изменить состояние с помощью ловушки useState, используя переменную - PullRequest
Новая
       3

Как изменить состояние с помощью ловушки useState, используя переменную

0 голосов
/ 12 января 2020

У меня есть FlatList с около 60 пунктов. У каждого элемента есть маленькая кнопка, которая нажимается для отображения дополнительной информации внутри элемента FlatList. 

   <View style={styles.infoIcon} >
        <TouchableOpacity onPress={() => { toggleInfo() }} >
          <Ionicons name="ios-information-circle" size={40} color={"#0ca9dd"} />
        </TouchableOpacity >
      </View>

  {showInfo ? <View><Text>{ itemData.item.info }</Text><View> : null }

Функция переключения onPress выглядит примерно так: 

  const toggleInfo = () => {
    if (showInfo === true) {
      setShowInfo(false);
   } else {
      setShowInfo(true);
   }
 };

Конечно, так как это FlatList, когда я нажимаю кнопку, все элементы FlatList показывают их скрытое содержимое. Но я хочу, чтобы отображалась только информация о выбранном элементе, оставляя все остальные без изменений.

Итак, я изменил onPress для получения аргумента: 

 <TouchableOpacity onPress={() => { toggleInfo(itemData.item.id) }} >

..., который хорошо. Но теперь мне нужно указать целевой массив состояний (который совпадает с идентификатором, но с «z», прикрепленным на конце, чтобы избежать любых конфликтов переменных): 

  const toggleInfo =(id) => { // id might be "ABC"
const infoState = `${id}z`;
const infoStateSET = `set${speciesState}`; // therefore: setABCz
// Now I want to target the state "ABCz" and "setABCz" useState variables
if (infoState === true) {
  infoStateSET(false);
} else {
  infoStateSET(true);
}

};

Теперь, очевидно, не существует литерала "infoStateSET", чтобы изменить состояние, но я хочу использовать переменную для назначения функции установленного состояния.

Возможно ли это?

1 Ответ

1 голос
/ 12 января 2020

Вы можете просто установить идентификатор в состоянии showInfo, а затем проверить, совпадает ли showInfo идентификатор с itemData.item.id.

, в основном вы бы имели такое состояние. 

const [showInfo, setShowInfo] = useState(null);

Тогда вы бы установили состояние так, используя вашу функцию toggleInfo: 

const toggleInfo = (id) => {
  if (showInfo === id) {
    setShowInfo(id);
  } else {
    setShowInfo(null);
  }
}

Затем в элементе Flatlist: 

<View style={styles.infoIcon} >
  <TouchableOpacity onPress={() => { toggleInfo(itemData.item.id) }} >
    <Ionicons name="ios-information-circle" size={40} color={"#0ca9dd"} />
  </TouchableOpacity >
</View>

{showInfo === itemData.item.id ? <View><Text>{ itemData.item.info }</Text><View> : null }
...