React Native循环渲染多个Switch时操作单个全联动怎么解决

问题根源 #

所有开关共用同一个全局状态变量isEnabled，修改该状态会同步作用到全部开关组件上，因此操作任意一个开关都会触发所有开关同步变更。

解决思路 #

用对象格式存储开关状态，以每条数据的id作为key，对应存储每个开关的启用/禁用状态，修改时只更新对应id的状态值即可。

修改后的代码示例 #

1. 调整状态定义与切换逻辑 #

// 替换原有的isEnabled状态定义
const [switchStatus, setSwitchStatus] = useState({});

const toggleSwitch = (id) => {
  setSwitchStatus(prev => ({
    ...prev,
    [id]: !prev[id] // 仅修改当前操作的id对应的开关状态
  }));
};

2. 调整Item组件，绑定对应状态 #

const Item = ({ id, title, toggleSwitch, switchStatus }) => {
  return (
    <View>
      <TextList>{title}</TextList>
      <Switch
        key={id}
        onValueChange={() => toggleSwitch(id)}
        value={!!switchStatus[id]} // 取值对应id的状态，未初始化默认返回false
      />
    </View>
  );
};

3. 调整渲染逻辑，传递所需参数 #

const renderItem = ({ item }) => {
  const date = new Date(item.synchronization)
  const formattedDate = date.toISOString().split('T')[0];
  return <Item 
    id={item.id} 
    title={'Sincronização: ' + formattedDate.split('-').reverse().join('/')}
    toggleSwitch={toggleSwitch}
    switchStatus={switchStatus}
  />
};

可选优化：接口返回初始开关状态的初始化方案 #

如果接口返回的每条数据中本身包含开关的初始启用状态，可以在拉取数据时直接初始化状态：

useEffect(() => {
  async function fetchData() {
    await api
      .get('/synchronization/group/true')
      .then(response => {
        const resData = response.data.data
        setData(resData)
        // 初始化开关状态，假设接口字段为enabled
        const initStatus = resData.reduce((acc, item) => {
          acc[item.id] = item.enabled ?? false
          return acc
        }, {})
        setSwitchStatus(initStatus)
      })
      .catch(error => setData(error));
  }
  fetchData();
}, []);

内容的提问来源于stack exchange，提问作者João Lucas