React Native Expo：useEffect和setParams不起作用

问题描述

因此，我试图创建一个将在setParams上传递的函数，以便我可以通过onPress在导航器中执行该函数中的任何内容。

这是我的EditProducts屏幕：

import React,{ useState,useEffect,useCallback } from 'react';
import { View,Text,StyleSheet,TextInput,ScrollView } from 'react-native';
import { useSelector } from 'react-redux';
import { CommonActions } from '@react-navigation/native';

const EditProductScreen = props => {

    // Check if you are in edit mode 
    const prodId = props.route.params?.productId;

    const editedProduct = useSelector(state => state.products.userProducts.find(prod => prod.id === prodId));

    const [title,setTitle] = useState(editedProduct ? editedProduct.title : '');
    const [imageUrl,setimageUrl] = useState(editedProduct ? editedProduct.imageUrl : '');
    const [price,setPrice] = useState('');
    const [description,setDescription] = useState(editedProduct ? editedProduct.description : '');
    

    // In order to submit we need to use this handler
    const submitHandler = useCallback(() => {
       console.log('Submitting!')
    });

    useEffect(() => {
        props.navigation.dispatch(CommonActions.setParams({ submit: submitHandler}));
    },[submitHandler])

如您所见：

// In order to submit we need to use this handler
    const submitHandler = useCallback(() => {
       console.log('Submitting!')
    });

    useEffect(() => {
        props.navigation.dispatch(CommonActions.setParams({ submit: submitHandler}));
    },[submitHandler])

我将其传递给setParams，然后在导航中：

 <AdminNavigator.Screen
                name="EditProduct"
                component={EditProductScreen}
                options={({ route }) => {
                    // so when you navigate wihout passing anything the route.params is undefined
                    // when you access a property if undefined it throws an error
                    const productId = route.params?.productId;
                    const submit = route.params?.submit;
                    return {
                        title: productId ? "Edit Product" : "Add Product",headerRight: () => (
                            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                                <Item
                                    title='Save'
                                    iconName={Platform.OS === 'android' ? 'md-checkmark' : 'ios-checkmark'}
                                    onPress={submit}
                                />
                            </HeaderButtons>
                        )
                    };
                }}
            />
        </AdminNavigator.Navigator>

我正在尝试通过onPress={submit}执行它。但是，它不是将console.log记录为“ Submitting”（提交），而是冻结了屏幕，根本不会移至任何屏幕。知道是什么原因造成的吗？

解决方法

问题与导航无关，在这些行中

const submitHandler = React.useCallback(() => {
       console.log('Submitting!')
    });

    React.useEffect(() => {
       console.log('Submitting! 121');
       navigation.setParams({ submit: submitHandler});
    },[])

首先，如果要在组件安装时运行useEffect，则不应在此处传递依赖项，问题是当提供sumbitHandler作为依赖项时，它一直在重新呈现，这导致useCallback创建新的SubmitHandler，最终在无限循环中。 同样，也不需要进行通用操作，您可以像上面那样直接设置参数。