React Native数组生成的多Switch组件同步启用问题解决

你遇到的问题根源很明确：所有Switch共享了同一个状态变量this.state.toggled，不管哪个开关触发改变，都会更新这个单一状态，导致所有开关同步变化。要解决这个问题，我们需要给每个Switch单独维护状态，具体步骤如下：

1. 重构状态结构 #

把原来单个的toggled变量，改成一个数组（或者对象），用来存储每个单词对应的开关状态。比如在构造函数里初始化：

constructor(props) {
  super(props);
  const initialWords = ['test', 'test', 'test'];
  this.state = {
    words: initialWords,
    // 给每个单词初始化一个开关状态，默认设为false
    toggledStates: Array(initialWords.length).fill(false)
  };
}

2. 绑定每个Switch到对应状态 #

在map生成列表项的时候，让每个Switch的value对应toggledStates数组里的对应索引项，更新状态时只修改当前索引的位置的值（注意要遵循React状态不可变的原则，不能直接修改原数组）：

const wordList = this.state.words.map((item, i) => (
  <View style={styles.wordsContainer} key={i}>
    <Text style={styles.pilgrimsWordText}>{item}</Text>
    <Switch
      style={styles.pilgrimsWordSwitch}
      onValueChange={(value) => {
        // 复制原状态数组，修改对应索引的状态
        const updatedToggles = [...this.state.toggledStates];
        updatedToggles[i] = value;
        this.setState({ toggledStates: updatedToggles });
      }}
      value={this.state.toggledStates[i]}
    />
  </View>
));

额外优化建议 #

如果你的words数组后续会动态添加或删除元素，记得同步更新toggledStates的长度（比如添加新单词时，给toggledStates追加一个默认状态）；另外，如果每个单词有唯一标识（比如id），建议用这个标识作为列表项的key，而不是数组索引，这样在数组变化时React能更高效地更新DOM。

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