时间戳

首页 > 解决方案 > 反应原生的多个开关如何

javascript - 反应原生的多个开关如何

问题描述

我正在尝试进行多个开关，问题是当我启用/禁用 1 时，所有其他开关一起启用/禁用。

我正在使用 useEffect 从我的 API 中获取数据。

const [data, setData] = useState([]);


  useEffect(() => {
    async function fetchData() {
      await api
        .get('/synchronization/group/true')
        .then(response => setData(response.data.data))
        .catch(error => setData(error));
    }

    fetchData();
  }, []);

  useEffect(() => {
    // Just return data
  }, [data]);


const [isEnabled, setIsEnabled] = useState({
  enabled: false
});

const toggleSwitch = () => setIsEnabled((toggle) => !toggle);

const Item = ({ id, title }) => {

  return (
    <View>
      <TextList>{title}</TextList>

      <Switch
        key={id}
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
};

在这里我的渲染切换循环，它根据数据库中的记录添加组件

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('/')} />
};

return (
  <Container>
    <List
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id.toString()}
    />
    <TouchableButton onPress={() => { navigation.navigate('Loading') }}>
      <TextButton>Carregar para offline</TextButton>
    </TouchableButton>
  </Container>
);
}

我的屏幕：

例子

标签： javascriptreact-native

解决方案

如果我理解正确，您提供的所有代码都在一个组件中。您需要单独存储开关按钮的状态。

试试看：

const Item = ({id, title, value, onValueChange}) => (
    <View>
        <TextList>{title}</TextList>

        <Switch
            onValueChange={onValueChange}
            value={value}
        />
    </View>
);

const Component = ({navigation}) => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            await api
                .get('/synchronization/group/true')
                .then(response => setData(response.data.data))
                .catch(error => setData(error));
        }

        fetchData();
    }, []);

    useEffect(() => {
        // Just return data
    }, [data]);

    const [state, setState] = useState({
        switches: {}
    });

    const toggleSwitch = useCallback((id) => () => setState((state) => ({
        ...state,
        switches: {
            ...state.switches,
            [id]: !state.switches[id]
        }   
    })), []);

    const renderItem = useCallback(({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('/')} value={!!state.switches[item.id]} onValueChange={toggleSwitch(item.id)}/>
    }, [state.switches, toggleSwitch]);

    return (
        <Container>
            <List
                data={data}
                renderItem={renderItem}
                keyExtractor={item => item.id.toString()}
            />
            <TouchableButton onPress={() => navigation.navigate('Loading')}>
                <TextButton>Carregar para offline</TextButton>
            </TouchableButton>
        </Container>
    );
};

推荐阅读