调用函数但未完成渲染

Question

有什么方法可以检查项目是否真的被渲染了？在我的代码中，我运行一个 grapqhl 查询，然后相应地重新呈现一些项目。在我的代码中，如果有用户在场，showUsers 函数会正常工作。

然而，当没有用户时，noUsersText函数被调用，正如 console.logs 所确认的那样，但我没有看到屏幕上呈现任何内容。我认为这可能是一个样式问题，但我也尝试增加字体或向视图添加更多项目 - 这显然不起作用。可能是什么问题？

调用函数 noUserText 时，isSubmitted 和 isNotFound 都打印为真。我在我的主要 jsx {isSubmitted && noUsersText(userData) && isNotFound} 中使用它，所以我相信文本应该显示出来。

  const [isSubmitted, setIsSubmitted] = useState(false);
  const [isNotFound, setIsNotFound] = useState(false);
  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');

  const noUsersText = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      console.log('isSubmitted', isSubmitted);
      console.log('Not Found', isNotFound);
      if (data) {
        if (data.users.nodes.length == 0) {
        return (
          <View>
            <Text style={styles.noUsers}>No Users Found</Text>
          </View>
        );}
      }
    },
    [userData],
  );

  const showUsers = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        return (
          <View style={styles.friends}>
            {data.users.nodes.map(
              (item: { firstName: string; lastName: string; id: number }) => {
                const userName = item.firstName
                  .concat(item.lastName);
                return (
                  <View
                  style={styles.item} key={item.id}> 
                    <View style={styles.addButtonContainer}>
                      <Button
                        rounded
                        style={styles.addButton}
                        onPress={() => {
                          addFriend(Number(item.id));
                          setIsSubmitted(false);
                          setUserData(null);
                        }}>
                      </Button>
                    </View>
                  </View>
                );
              },
            )}
          </View>
        );
      }
    },
    [createUserRelationMutation, userData],
  );

  const addFriend = React.useCallback(
    (id: Number) => {
      createUserRelationMutation({
        variables: {
          ..,
        },
      });
    },
    [createUserRelationMutation],
  );

  const getFriendId = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        if (data.users.nodes.length == 0) {
          setUserData(data);
          setIsNotFound(true);
          //Alert.alert('User Not Found');
        } else {
          setUserData(data);
        }
      }
    },
    [addFriend],
  );

  const [loadUsers] = useUsersLazyQuery({
    onCompleted: getFriendId,
    onError: _onLoadUserError,
  });

  const handleSubmitForm = React.useCallback(
    (values: FormValues, helpers: FormikHelpers<FormValues>) => {
      setIsSubmitted(true);
      console.log('Submitted');
      loadUsers({
        variables: {
          where: { email: values.email },
        },
      });
      values.email = '';
    },
    [loadUsers],
  );


  return (
    <Modal
      visible={showAddFriendEmailPage}
      animationType="slide"
      transparent={true}>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.searchTopContainer}>
            <View style={styles.searchTopTextContainer}>
              <Text
                style={styles.searchCancelDoneText}
                onPress={() => {
                  toggleShowPage();
                  setIsSubmitted(false);
                  setUserData(null);
                  setIsNotFound(false);
                }}>
                Cancel
              </Text>
              <Text style={styles.searchTopMiddleText}>
                Add Friend by Email
              </Text>
              <Text style={styles.searchCancelDoneText}>Done</Text>
            </View>
            <View>
              <Formik
                initialValues={initialValues}
                onSubmit={handleSubmitForm}
                validationSchema={validationSchema}>
                {({ handleChange, handleBlur, handleSubmit, values }) => (
                  <View style={styles.searchFieldContainer}>
                    <View style={styles.form}>
                      <FieldInput
                        handleChange={handleChange}
                        handleBlur={handleBlur}
                        value={values.email}
                        placeholderText='a@example.com'
                      />
                    </View>
                    <View style={styles.buttonContainer}>
                      <Button
                        rounded
                        style={styles.button}
                        onPress={handleSubmit}>
                        <Text style={styles.text}>Search </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>
            </View>
            {isSubmitted && showUsers(userData)}
            {isSubmitted && noUsersText(userData) && isNotFound}
          </View>
        </View>
      </SafeAreaView>
    </Modal>
  );
};

Answer 1

React 不呈现 boolean、undefined 或 null 值。另请注意，当您编写条件渲染时

 {isSubmitted && noUsersText(userData) && isNotFound}

结果是 return 第一个假值。否则最后的真值为 returned

所以在你的情况下，上面的代码 return true 而不是 View 组件

将上面的改为

{isSubmitted && isNotFound && noUsersText(userData)}

它应该可以工作

调用函数但未完成渲染

function gets called but no rendering is done

javascript

render

typescript

reactjs

react-native