Javascript 函数被调用，但未进行任何渲染

是否有任何方法可以检查项目是否实际呈现？在我的代码中，我运行grapqhl查询，然后相应地重新呈现一些项。在我的代码中，如果存在用户，则

showUsers

功能可以正常工作

但是，当没有用户时，

nousestext

函数将按console.logs确认的方式调用，但我看不到屏幕上呈现的任何内容。我认为这可能是一个样式问题，但我也尝试增加字体或向视图中添加更多项目-这显然不起作用。问题可能是什么

调用函数

noUserText

时，将

isSubmitted

和

isNotFound

打印为true。我在我的主要jsx

{isSubmitted&&nousestext（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>
  );
};

const[isSubmitted，setIsSubmitted]=useState（false）；
const[isNotFound，setIsNotFound]=useState（false）；
const[userData，setUserData]=useState（“”）；
const noUsersText=React.useCallback(
（数据：UsersLazyQueryHookResult）=>{
console.log（'isSubmitted'，isSubmitted）；
console.log（'notfound'，isNotFound）；
如果（数据）{
if（data.users.nodes.length==0）{
返回(
找不到用户
);}
}
},
[用户数据]，
);
const showUsers=React.useCallback(
（数据：UsersLazyQueryHookResult）=>{
如果（数据）{
返回(
{data.users.nodes.map(
（项目：{firstName:string；lastName:string；id:number}）=>{
const userName=item.firstName
.concat（项目名称）；
返回(
{
addFriend（编号（项目id））；
setIsSubmitted（false）；
setUserData（空）；
}}>
);
},
)}
);
}
},
[CreateUserRelationSpection，userData]，
);
const addFriend=React.useCallback(
（身份证号码）=>{
CreateUserRelationVariation({
变量：{
..,
},
});
},
[CreateUserRelationBartation]，
);
const getFriendId=React.useCallback(
（数据：UsersLazyQueryHookResult）=>{
如果（数据）{
if（data.users.nodes.length==0）{
setUserData（数据）；
setIsNotFound（true）；
//Alert.Alert（“未找到用户”）；
}否则{
setUserData（数据）；
}
}
},
[addFriend]，
);
const[loadUsers]=useUsersLazyQuery({
未完成：getFriendId，
OneError:_onLoadUserError，
});
const handleSubmitForm=React.useCallback(
（值：FormValues，助手：FormikHelpers）=>{
setIsSubmitted（true）；
console.log（'Submitted'）；
负荷用户({
变量：{
其中：{email:values.email}，
},
});
values.email=''；
},
[loadUsers]，
);
返回(
{
切换ShowPage（）；
setIsSubmitted（false）；
setUserData（空）；
setIsNotFound（false）；
}}>
取消
通过电子邮件添加朋友
多恩
{（{handleChange，handleBlur，handleSubmit，values}）=>(
搜寻
)}
{isSubmitted&&showUsers（userData）}
{isSubmitted&&nousestext（userData）&&isNotFound}
);
};

React不会呈现

布尔值

、

未定义值

或

空值

值。还请注意，在编写条件渲染时，如

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

在第一个falsy值上返回结果。否则将返回最后一个truthy值

因此，在您的情况下，上述代码返回true，而不是视图组件

将上述内容更改为

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

---

它应该可以工作

如果运行console.log（数据），会返回什么？我可能是未定义的，所以它不会进入IF条件，所以没有返回，也没有呈现任何内容。不，这不是问题所在。答案解决了这个问题，我不明白为什么@AlexandrePaivaIt可以工作，但是你能再次解释一下这里什么返回true吗？在你的例子中，它应该是

{true&&&&true}

。现在，由于所有值都是真实值，因此返回最后一个真实值，在本例中为

true

。如果将顺序更改为我显示的顺序，它将返回视图组件