useEffect返回未处理的promise

Question

我已经花了几个小时试图在ReactNativeuseEffect钩子中调用一个API。有时，当我重新启动应用程序时，值会被解析。但大多数时候，我有一个Unhandled promise rejection。我在谷歌上搜索并尝试了各种方法。我试过用.then等。我就是想不通。

import React, { useState, useContext, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import { EvilIcons } from '@expo/vector-icons';
import jsonServer from '../api/jsonServer';

const ShowScreen = ({ navigation }) => {  
const id = navigation.getParam('id'); 
const [post, setPost] = useState([]);  
const getBlog = async () => {
const result = await jsonServer.get(`http://0.0.0.0/blog/docroot/jsonapi/node/article/${id}`);
return result;
}  
useEffect(() => {        
async function setToState() {
const val =  await getBlog();
setPost(val);   
}
setToState();    
},[]);
return (
<View>
<Text>Here {  console.log(post) }</Text>        
</View>
);
};
ShowScreen.navigationOptions = ({ navigation }) => {
return {
headerRight: (
<TouchableOpacity
onPress={() =>
navigation.navigate('Edit', { id: navigation.getParam('id')
})}
>
<EvilIcons name="pencil" size={35} />
</TouchableOpacity>
)
};
};
const styles = StyleSheet.create({});
export default ShowScreen;

Answer 1

您可以做的事情如下：

....
....
const [post, setPost] = useState([]); 
const [isMounted, setIsMounted] = useState(false);  
const getBlog = async () => {
const result = await jsonServer.get(`http://0.0.0.0/blog/docroot/jsonapi/node/article/${id}`);
return result;
}  
useEffect(() => {
setIsMounted(true)
async function setToState() {
// using try catch I'm handling any type of rejection from promises. All errors will move to catch block.
try{
const val =  await getBlog();
// checking if component is still mounted. If mounted then setting a value. We shouldn't update state on an unmounted component.
if(isMounted){
setPost(val);
}
} catch(err){
console.log("Error", err)
}
}    
setToState();
return () => {
// Setting is mounted to false as the component is unmounted.
setIsMounted(false)
}
},[]);

我相信这将解决您未处理的拒绝承诺错误。如果它仍然不能解决问题，请尝试。这将在Sanck中创建相同的问题。

Answer 2

我认为我的问题不仅仅是promise，问题似乎也是我没有处理状态中的未定义/null。以下代码对我有效。

import React, { useState, useContext, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import { EvilIcons } from '@expo/vector-icons';
import jsonServer from '../api/jsonServer';
const ShowScreen = ({ navigation }) => {
const id = navigation.getParam('id'); 
const [post, setPost] = useState([]);      
const getBlog = async () => {
const result = await jsonServer.get(`http://hello.com/jsonapi/node/article/${id}`).then(
res => {         
setPost(res)
return res;
}, err => { 
console.log(err); 
});        
}  
useEffect(() => {  
setPost(getBlog());             
},[]);
return (
<View>
<Text>{ post.data ? post.data.data.id : "" }</Text>                        
</View>
);
};            
export default ShowScreen;

注意：我正在useEffect和请求中设置状态。我还没有检查我是否能只做一次。