useEffect 提交表单时的副作用答案

【问题标题】：useEffect side effect on submit of formuseEffect 提交表单时的副作用
【发布时间】：2020-08-01 16:45:22
【问题描述】：

假设我有一个表单，其中包含一些用户输入字段和标题中的提交按钮，当按下该按钮时会调度几个操作。我使用了一个名为calculate 的函数，它接受存储在number 中的用户输入并更新状态变量result，我想在按下提交标题按钮后将其传递给submitFunction。我正在尝试通过useEffect 实现这一目标，但由于某种原因，result 没有及时更新。

例如，如果我在文本输入字段中输入 99，result 将作为 90 而不是 990 发送到 submitHandler，即文本输入中的一个数字被省略。有人可以告诉我如何修改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>
    }
};

【问题讨论】：

标签： javascript reactjs react-native react-hooks use-effect

【解决方案1】：

限制result 的更新仅限于number 值的更改，而不是每次渲染（如果您不将第二个参数传递给useEffect，它会更新每次渲染）

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

或者

如果您没有在其他任何地方使用calculate 函数

useEffect(() => {
  setResult(number * 10);
}, [number])

【讨论】：

【解决方案2】：

这是因为输入 99 时，实际上有 2 个 onChangeText 事件，第一个输入的 9，submitHandler 的结果是 90，第二个 9 的结果是 990。

我认为您可能需要 debounce function 作为输入组件。

【讨论】：