如何解决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,最终在无限循环中。 同样,也不需要进行通用操作,您可以像上面那样直接设置参数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。