问递增和递减反应钩子
EN

Stack Overflow用户

提问于 2020-12-14 20:47:48

回答 1查看 355关注 0票数 0

递增和递减工作，但当我点击递增，然后我想要递减，它仍然递增1倍，然后正常工作。我猜这是与ASYNC渲染相关的问题。如何解决这个问题？在其他方面，问题是相同的。我得到了两个文件。Worker list屏幕，另一个是渲染的底部栏。

Worker list screen

import {
    RefreshControl,
    View,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    Image,
} from 'react-native';
import { List, Divider, Text } from 'react-native-paper';

import { request } from '../backend/backend';
import { appDefaultTheme } from '../theme/paperTheme';
import { boldCatamaran } from '../theme/paperTheme';
import { colors } from '../theme/colors';
import { translate } from '../languages/translator';
import { config as globalConfig } from '../backend/config';
import { LoadingComponent } from '../components/LoadingComponent';
import { BottomBar } from '../components/BottomBar';
import { TopBar } from '../components/TopBar';
import moment from 'moment';
import Avatar from '../assets/images/default_image.svg';

export const WorkersListScreen = ({ route, navigation }) => {
    let array = [];

    const { projectName, projectID } = route.params;
    const [loading, setLoading] = useState(true);
    const [refreshing, setRefreshing] = useState(false);
    const [workersData, setWorkersData] = useState([]);
    const [timeData, setTimeData] = useState([]);
    const [currentWeek, setCurrentWeek] = useState(moment().week());

    const [startOfWeek, setStartOfWeek] = useState(moment().startOf('isoWeek'));

    const [endOfWeek, setEndOfWeek] = useState(moment().endOf('isoWeek'));

    useEffect(() => {
        
    }, []);
    

    

    const weekIncrement = () => {
        console.log(timeData);
        setCurrentWeek(currentWeek + 1);
        setStartOfWeek(moment().week(currentWeek).startOf('isoWeek'));
        setEndOfWeek(moment().week(currentWeek).endOf('isoWeek'));
        // console.log(timeData[0].attributes);
    };

    const weekReduction = () => {
        setCurrentWeek(currentWeek - 1);
        setStartOfWeek(moment().week(currentWeek).startOf('isoWeek'));
        setEndOfWeek(moment().week(currentWeek).endOf('isoWeek'));
    };

    

    return (
        <View>
            <BottomBar
                loading={loading}
                startOfWeek={startOfWeek.format('DD.MM.YYYY')}
                endOfWeek={endOfWeek.format('DD.MM.YYYY')}
                onClickIncrement={() => weekIncrement()}
                onClickReduce={() => weekReduction()}
            />
        </View>
    );
};



export default WorkersListScreen;

Bottom bar

import React from 'react';
import { TouchableOpacity, StyleSheet, View } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Appbar, Button, Text } from 'react-native-paper';
import { colors } from '../theme/colors';
import { useNavigation } from '@react-navigation/native';
import { color } from 'react-native-reanimated';

export const BottomBar = (props) => {
    const navigation = useNavigation();
    return (
        <Appbar style={styles.bottomBarContainer}>
            <Appbar.Action
                style={styles.arrowButton}
                onPress={() => navigation.goBack()}
                icon="arrow-left"
                disabled={props.loading && true}
            />
            <Button mode="text" onPress={props.onClickReduce}>
                <Icon name="chevron-left" size={24} color="#fff" />
            </Button>
            <View>
                <Text style={{ color: colors.white, fontSize: 12 }}>
                    {props.startOfWeek}
                </Text>
                <Text style={{ color: colors.white, fontSize: 12 }}>
                    {props.endOfWeek}
                </Text>
            </View>
            <Button mode="text" onPress={props.onClickIncrement}>
                <Icon name="chevron-right" size={24} color="#fff" />
            </Button>
            <TouchableOpacity
                style={styles.timeButton}**strong text**
                disabled={props.loading && true}
            >
                <Icon name="more-time" size={24} color={colors.white} />
            </TouchableOpacity>
        </Appbar>
    );
};

reactjs

react-native

电商安全场景方案

帮助电商行业客户一站式解决Web安全、黑产羊毛党对抗、高危漏洞、BOT工具、恶意入侵门户服务器等安全问题

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-14 21:05:17

不确定增量的哪一部分不能像您希望的那样工作。如果它与显示startOfWeek和endOfWeek相关，那么立即传递currentWeek + 1而不是currentWeek可能会解决您的问题。

const weekIncrement = () => {
    console.log(timeData);
    setCurrentWeek(currentWeek + 1);
    setStartOfWeek(moment().week(currentWeek + 1).startOf('isoWeek'));
    setEndOfWeek(moment().week(currentWeek + 1).endOf('isoWeek'));
    // console.log(timeData[0].attributes);
};

const weekReduction = () => {
    setCurrentWeek(currentWeek - 1);
    setStartOfWeek(moment().week(currentWeek - 1).startOf('isoWeek'));
    setEndOfWeek(moment().week(currentWeek - 1).endOf('isoWeek'));
};