时间戳

首页 > 解决方案 > React Native Expo：useEffect 和 setParams 不起作用

reactjs - React Native Expo：useEffect 和 setParams 不起作用

问题描述

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

这是我的 EditProductsScreen：

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.logging 单词“提交”它冻结屏幕并且根本不会移动到任何屏幕。知道是什么原因造成的吗？

标签： reactjsreact-nativereact-reduxexporeact-navigation

解决方案

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

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

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

首先，如果您希望在安装组件时运行 useEffect ，则不应在此处传递依赖项，问题是当 sumbitHandler 作为依赖项提供时，它会不断重新渲染，这会导致 useCallback 创建新的 submitHandler ，因此它最终会无限环形。也不需要通过commonactions，您可以像上面那样直接设置参数。

推荐阅读