React中如何利用数组索引更新对应state的isVisible状态？

嘿，我来帮你搞定这个问题！你现在是想在点击每个列表项的TouchableOpacity时，根据它的索引index来修改对应的isVisible状态对吧？原来的写法this.setState({ isVisible{index}: true })是行不通的，因为对象的键名不能直接这么拼接，我给你两种解决方案：

方案一：适配你当前的状态结构 #

ES6的计算属性名可以帮你动态生成状态字段名，只需要把拼接后的字段名用方括号[]包起来就行，修改后的onPress代码如下：

<TouchableOpacity onPress={() => {
  this.setState({
    // 用模板字符串拼接字段名，外层方括号表示计算属性名
    [`isVisible${index}`]: true
  })
}}>
  {/* 你的按钮内容 */}
</TouchableOpacity>

这样点击第index个列表项时，就会把state里对应的isVisible${index}字段设为true了。如果需要切换状态（点击显示/隐藏），把true改成!this.state[isVisible${index}]即可。

方案二：优化状态结构（更推荐） #

你现在的状态是一个个独立的isVisible0、isVisible1字段，其实可以改成数组结构，更贴合列表的逻辑，维护起来也更方便（比如列表长度变化时不用手动加状态字段）：

1. 先修改初始状态：

// 直接根据Lists的长度生成对应长度的false数组，不用手动写每个字段
state = {
  isVisibleList: Lists.map(() => false)
}

2. 然后修改onPress的逻辑：

<TouchableOpacity onPress={() => {
  // 先复制原状态数组，不要直接修改原状态（React状态不可变）
  const newIsVisibleList = [...this.state.isVisibleList];
  // 修改对应索引的状态值，这里是设为true，要切换的话就用!newIsVisibleList[index]
  newIsVisibleList[index] = true;
  this.setState({ isVisibleList: newIsVisibleList });
}}>
  {/* 你的按钮内容 */}
</TouchableOpacity>

这样不管你的列表有多少项，都能自动对应到状态数组的索引，逻辑更清晰也更易维护。

内容的提问来源于stack exchange，提问作者ryonz