[英]UseEffect: Invalid hook call. Hooks can only be called inside of the body of a function component
I was trying to get the list of call logs in android using react-native
, I wanted to set up a button
in which when user clicks permission dialog should've appeared, but instead an error appears as I tried to use useEffect
hook as the event
fires and hook rules mentions that我试图使用
react-native
中的呼叫日志列表,我想设置一个button
,当用户单击权限对话框时应该出现该按钮,但是当我尝试在event
触发时使用useEffect
挂钩时出现错误和钩子规则提到
Do not call in event handlers
不要调用事件处理程序
Tried other possibilities but still not able to reach some solutions.尝试了其他可能性,但仍然无法找到一些解决方案。
Here is the code snippet I am using:这是我正在使用的代码片段:
const ReadLog = ({ navigation }) => {
const [listData, setListDate] = useState([])
const ReadFromCalLogs = () => {
useEffect(() => {
async function fetchData() {
if (Platform.OS != "ios") {
try {
//Ask for runtime permission
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
{
title: "Call Log Example",
message: "Access your call logs",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK",
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
CallLogs.loadAll().then((c) => setListDate(c))
CallLogs.load(3).then((c) => console.log(c))
} else {
Alert.alert("Call Log permission denied")
}
} catch (e) {
Alert.alert(e.message)
}
} else {
alert(
"Sorry! You can’t get call logs in iOS devices because of the security concern"
)
}
}
fetchData()
}, [])
}
return (
<View>
<View style={styles.ReadFromCallLogs}>
<TouchableOpacity onPress={() => ReadFromCalLogs()}>
<Text style={{ color: "#009387", marginTop: 15 }}>
<MaterialCommunityIcons
size={Dimensions.iconSize}
name="phone-log-outline"
>
</MaterialCommunityIcons>
Read from Call Logs?
</Text>
</TouchableOpacity>
< /View>
</View>
)
}
export default ReadLog
what is the elegant way to do this?这样做的优雅方法是什么?
You can't call a hook inside a function.您不能在 function 中调用钩子。 Hooks can be called only at the top level of the component.
钩子只能在组件的顶层调用。
In your code snippet you are calling useEffect()
hook inside a normal function ReadFromCalLogs
this is what causing the error.在您的代码片段中,您在普通的 function
ReadFromCalLogs
中调用useEffect()
挂钩,这就是导致错误的原因。 However, you don't need to call useEffect()
try (Untested):但是,您不需要调用
useEffect()
尝试(未经测试):
const ReadFromCalLogs = async () => {
if (Platform.OS != "ios") {
try {
//Ask for runtime permission
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CALL_LOG,
{
title: "Call Log Example",
message: "Access your call logs",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK",
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
CallLogs.loadAll().then((c) => setListDate(c));
CallLogs.load(3).then((c) => console.log(c));
} else {
Alert.alert("Call Log permission denied");
}
} catch (e) {
Alert.alert(e.message);
}
} else {
alert(
"Sorry! You can’t get call logs in iOS devices because of the security concern"
);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.