React Native中Switch受其他Switch及MultiSlider联动异常求助

我正在开发一个设置页面，页面包含两个Switch组件和一个MultiSlider组件。目前遇到异常问题：当第二个Switch处于开启状态，或拖动MultiSlider滑块时，第一个Switch会自动切换为开启状态。尝试排查问题原因但未能解决，恳请各位提供问题分析及解决建议。

从代码中可以定位到几个核心问题：

• 直接修改React State对象：在useEffect中直接对settingsData进行赋值操作（settingsData.switch1 = ...），React的State是不可变的，直接修改会破坏状态一致性，导致组件渲染时出现异常状态同步。
• useEffect语法错误：useEffect的依赖数组被错误地写在了括号外面，正确语法应为useEffect(() => {}, [dependency])，当前写法会导致effect在每次组件渲染时都执行，进一步加剧状态混乱。
• MultiSlider的min/max配置错误：将settingsData[item._id][0]和settingsData[item._id][1]作为滑块的min和max，拖动滑块时会动态改变范围值，导致滑块逻辑异常，同时触发的State更新会引发连锁问题。
• State更新未使用函数式写法：在setSettingsData时直接引用当前的settingsData，存在闭包陷阱，可能导致使用旧的State值进行更新，引发状态不一致。

• 禁止直接修改State，使用setState更新：在useEffect中更新后端返回的设置时，必须通过setSettingsData来更新，而非直接修改State对象：

  useEffect(() => {
    if (settingData?.getSettings) {
      setSettingsData(prevState => ({
        ...prevState,
        switch1: settingData.getSettings.switch1,
        switch2: settingData.getSettings.switch2
      }));
    }
  }, [settingData?.getSettings]);
  

• 修正useEffect的语法错误：确保依赖数组是useEffect的第二个参数，结构如上。
• 固定MultiSlider的min和max值：将滑块的min和max设置为固定初始范围（比如0和100），避免拖动时动态改变范围：

  <MultiSlider
    // 其他属性保持不变
    min={0}
    max={100}
    // 其他属性保持不变
  />
  

• 使用函数式更新State：在所有setSettingsData的地方，使用函数式更新获取最新的State值，避免闭包问题：

  // Switch的onValueChange
  onValueChange={value => 
    setSettingsData(prev => ({
      ...prev,
      [item._id]: value,
    }))
  }
  
  // MultiSlider的onValuesChange
  onValuesChange={x => 
    setSettingsData(prev => ({ 
      ...prev, 
      [item._id]: x,
    }))
  }
  

export default function SettingsScreen() {
    const [settingsData, setSettingsData]: any  = React.useState({
      switch1: false,
      multiSlider: [0,100],
      switch2: false,
    })
   
    useEffect(() => {
      if (settingData?.getSettings) {
        setSettingsData(prevState => ({
          ...prevState,
          switch1: settingData.getSettings.switch1,
          switch2: settingData.getSettings.switch2
        }));
      }
    }, [settingData?.getSettings])

    const sectionData = [
      {title: 'Preferences', 
      data: [
        {_id: 'switch1', type:'Switch1', value:false},
        {_id: 'multiSlider', type:'multiSlider', single:false},
      ]}, 
      {
        title:'Privacy',
        data: [
          {_id: 'switch2', type:'switch2', value:false}
        ]
      }
    ]
 
    const info = ['multiSlider']
   
   
    return (
      <View>
          <SectionList
            sections={sectionData}
            keyExtractor={(item, index) => item.type+index}
            renderItem={({item}) => (
                <View  style={{
                    flex: 0,
                    alignItems: 'center',
                    flexDirection: 'row',
                    justifyContent:'space-between',
                    paddingHorizontal: 15,
                    paddingVertical:0,
                    }}>
                <Text style={{ fontSize:17,}}>{item.type}</Text>
                {!info.includes(item.type) ?
                <View>
                    <Switch
                        onValueChange={ value  => 
                          setSettingsData(prev => ({
                            ...prev, 
                            [item._id]:value,
                          }))}
                        value={settingsData[item._id]}
                        />
                    <StatusBar style='auto' />
                </View>
                :
                <View style={{ alignItems: 'center',flexDirection: 'row', width:290, paddingRight:10}}>
                    <View style={{width:35}}>
                    {item.single === false &&
                    <Text>{settingsData[item._id][0]}</Text>
                    }
                    </View>
                    <MultiSlider
                        trackStyle={{backgroundColor:'#bdc3c7', height:3.5}}
                        selectedStyle={{backgroundColor:'#e33062'}}
                        values={ item.single ?
                          [settingsData[item._id][1]] : settingsData[item._id]}
                        sliderLength={200}
                        onValuesChange= {x => 
                          setSettingsData(prev => ({ 
                            ...prev, 
                            [item._id]: x,
                        }))}
                        min={0}
                        max={100}
                        step={1}
                        allowOverlap={false}
                        snapped={true}
                    />
                
                {item.single === false &&
                <View style={{width:45,}}>
                 <Text style={{paddingLeft:20}}>{settingsData[item._id][1]}</Text>
                 </View> 
                }
                </View>
                }
                </View>
                </View>
            )}
            renderSectionHeader={({section: {title}}) => (
                <Text style={{ fontSize:19, paddingVertical:10}}>{title}</Text>
            )}
            />       
      </View>
    );
  };

内容的提问来源于stack exchange，提问作者pelotador.1