Question

我必须使用条件检查显示来自服务器的数据的选项菜单。这是我的代码：

    function renderMoreOptionsOnNavbar(groupInfo){

    console.log('hey check this out', groupInfo)

    if (groupInfo.user_joined) {

        var formData = new FormData();
        formData.append('user_id', global.currentUser.USER_ID);
        formData.append('slug', groupInfo.id);

        var adminsIdsArray = []
        ajaxPost({
                 url: 'community',
                 basePath: 'lumen',
                 params: formData
                 }).then(res => {
                         if(!res.err_code) {
                         console.log('This is what you need', res)
                         const communityAdminsArray = res.community_admins

                         adminsIdsArray = communityAdminsArray.map(function(user) {
                                                                   return user.user_id
                                                                   })

                         console.log('AdminsArray', adminsIdsArray.includes(global.currentUser.USER_ID))

                         }
                         })


        const menuOptions = adminsIdsArray.includes(global.currentUser.USER_ID) ? ['Switch off notifications', 'Edit group information', 'Quit group'] : ['Switch off notifications', 'Quit group']
                                const menuHeight = menuOptions.length*40
                                console.log('options', menuOptions)
        return(
               <ModalDropdown options={menuOptions} style={styles.dropDownView} dropdownStyle = {styles.dropdownStyle, {height: menuHeight, width: 175}} adjustFrame = {adjustDropDownFrame}
               renderSeparator = {renderDropDownSeparator} dropdownTextStyle = {styles.dropDownOptionText}
               onSelect = {onSelectingDropDownOption.bind(this, groupInfo)}
               showsVerticalScrollIndicator = {false}
               >
               <View style={styles.dropDownButtonView}>
               <Image
               source={require('../../Assets/vertical_dots_menu.png')}
               resizeMode = {Image.resizeMode.center}
               style = {styles.dropDownBaseButton}
               />
               </View>
               </ModalDropdown>
               )

    }
    else {
        return null
    }
}

数据前加载菜单中的选项。有人可以告诉我，如何在数据加载之前暂停渲染。

Answer 1

您应该遵循这种模式来实现您想要的目标：

state = {requiredData: null}

fetchDataFunction().then((resp)=>{
  ...
  this.setState({requiredData: resp}) // I assume the response of fetch is what you need
})

render() {
  if (this.state.requiredData === null) {
    return null // you can use a spinner instead null
  } else {
    return (
      ... // your main view
    )
  }
}

仅在从服务器

1 个答案: