使用 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 的实际内容。我还应该如何调用该组件？

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

使用 onError 渲染一个函数

Render a function with onError

javascript

render

typescript

reactjs

react-native