javascript - 使用 onError 渲染函数

Question

当运行 grapqhl 查询（在 Apollo 的 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 的实际内容。我还应该如何调用组件？

标签： javascriptreactjstypescriptreact-nativerender

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>
  );