Question

我有一个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) }} >

...很好。但是，现在我需要定位正确的状态数组（与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”来更改状态，但是我确实想使用变量来定位设置状态函数。

这可能吗？

Answer 1

您只需将ID设置为showInfo状态，然后检查showInfo ID是否与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 }

如何使用useState钩子使用变量来更改状态

1 个答案: