使用onError呈现函数

Question

我有一个对象，我想在运行grapqhl查询(在阿波罗的onError上)时出现错误时呈现它：

export const ErrorContainer: React.FunctionComponent = () => {
  console.log('container running')
  return (
    <View style={styles.errorView}>
    <Text style={styles.errorText}>Unable to Load Friends</Text>
  </View>
  );
};

现在在我的主屏幕上，我尝试了这个：

const { data, error } = useGetMyProfileQuery({
  onCompleted: () => {
    //setUserData(data)
  },
  onError: ErrorContainer
  },
});

我还尝试了这个：

{error && <ErrorContainer />}

return (
    <SafeAreaView style={styles.safeView}>
      <Container style={styles.container}>
        <Text
          style={styles.backText}
          onPress={() => navigation.navigate('Home')}>
          Zurück
        </Text>
        <View style={styles.listHolder}>
        {data && 
          <FlatList
            data={data.me.friends}
            horizontal={false}
            renderItem={({ item }) => (
              <Friend
                friend={item}
                //onDeleteFriend={onDeleteFriend}
                originatorId={data.me.id}
              />
            )}
            keyExtractor={(item) => item.id.toString()}
            ListEmptyComponent={NoFriendsContainer}
          />
            }
            {error && ErrorContainer}
        </View>
      </Container>
    </SafeAreaView>
  );

但是，尽管我看到了控制台日志，但我看不到ErrorContainer的实际内容。我还应该如何调用组件？

Answer 1

将组件作为回调传递给钩子是没有意义的，因为这里是onError: ErrorContainer。尽管组件是一个函数，但将其作为回调传递并不会神奇地呈现它。

您必须在模板中呈现它。就像你在{error && <ErrorContainer />}上面做的那样

只需尝试向您的屏幕添加其他状态

const [isErrorVisible, setErrorVisible] = useState(false);

然后在您之前传递组件的回调中设置它

const { data, error } = useGetMyProfileQuery({
  onCompleted: () => {
    //setUserData(data)
  },
  onError: () => {
    setErrorVisible(true); // callback now instead of ErrorContainer
  }
});

然后在您的模板中使用它

return (
    <SafeAreaView style={styles.safeView}>
      <Container style={styles.container}>
        <Text
          style={styles.backText}
          onPress={() => navigation.navigate('Home')}>
          Zurück
        </Text>
        <View style={styles.listHolder}>
        {data && 
          <FlatList
            data={data.me.friends}
            horizontal={false}
            renderItem={({ item }) => (
              <Friend
                friend={item}
                //onDeleteFriend={onDeleteFriend}
                originatorId={data.me.id}
              />
            )}
            keyExtractor={(item) => item.id.toString()}
            ListEmptyComponent={NoFriendsContainer}
          />
         }
         {/* here using the flag and rendering the component in template */}
         {isErrorVisible && <ErrorContainer />}
        </View>
      </Container>
    </SafeAreaView>
  );