Побочный эффект useEffect при отправке формы - PullRequest
Новая
       80

Побочный эффект useEffect при отправке формы

0 голосов
/ 01 августа 2020

Допустим, у меня есть форма с некоторыми полями для ввода пользователем и кнопкой отправки в заголовке, которая отправляет несколько действий при нажатии. Я использую функцию под названием calculate, которая принимает пользовательский ввод, хранящийся в number, и обновляет переменную состояния result, которую я хотел бы передать в submitFunction после нажатия кнопки заголовка отправки. Я пытаюсь добиться этого с помощью useEffect, но по какой-то причине result не обновляется вовремя.

Например, если я ввожу 99 в поле ввода текста, result отправляется на submitHandler означает 90 вместо 990, т. е. одна из цифр введенного текста отсутствует. Может ли кто-нибудь сказать мне, как изменить useEffect или мои вызовы функций, чтобы number обновлялся вовремя, а правильное значение result передавалось submitHandler? 

const ExampleScreen = props => {
    const dispatch = useDispatch();

    const [number, setNumber] = useState(0);
    const [result, setResult] = useState(0);

    const calculate = (n) => {
        setResult(n * 10);
    };

    useEffect(() => {
        calculate(number); // something not working here!
    })

    const submitHandler = useCallback(() => {
        dispatch(updateList(result));
        dispatch(updateTotal(result));
    }, [dispatch, result]);
    
    useEffect(() => {
        props.navigation.setParams({submit: submitHandler});
    }, [submitHandler]);

    return (
        <View>
            <TextInput
                keyboardType='numeric'
                value={number}
                onChangeText={(val) => setNumber(val)}
            />
        </View>
    );
};

ExampleScreen.navigationOptions = navData => {
    const submitFunction = navData.navigation.getParam('submit');
    return {
        headerRight: () => <HeaderButtons>
            <Item 
                title='Submit'
                iconName='md-checkmark'
                onPress={submitFunction}
            />
        </HeaderButtons>
    }
};

Ответы [ 2 ]

1 голос
/ 01 августа 2020

Ограничить обновление result только для изменения значения number не для каждого рендера (если вы не передаете второй аргумент в useEffect , он обновляется при каждом рендере ) 

useEffect(() => {
  calculate(number); // something not working here!
}, [number]) // Add number as hook dependency

Или

Если вы не используете функцию calculate где-либо еще 

useEffect(() => {
  setResult(number * 10);
}, [number])
0 голосов
/ 01 августа 2020

Это потому, что при вводе 99 на самом деле есть 2 события onChangeText, первые 9, которые вы ввели, вы получите 90 как результат от submitHandler и 990 для второго 9.

Я думаю, вы можете требуется функция устранения дребезга для входного компонента.

...