防止在React Native中的页面加载中调用多个Const

tf7tbtn2  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(191)

下面是我的代码:

const Home = ({route}) => {

      const drawerTag = route.params.drawerTag; //drawer Menu Tag History
      const dropDownLabel = route.params.dropDownLabel; // For GE0 Dropdown Header

      // All Variables for use
      const [Geovalue, setValueGeo] = useState(null); // for selected Geo
      const [plvalue, setValuePl] = useState(null); // for selected PL
      const [isFocus, setIsFocus] = useState(false); // focused ? not focused
      const [geoList, setGeoList] = useState(null); //Geo List
      const [plList, setPlList] = useState(null); //PL List
      const [plDetailsInfo, setplDetailsInfo] = useState(null); //PL List
      const [DataTable, setTableData] = useState(null);

      // After Page load Function call
      useEffect(() => {
        function fetchData() {
          getGeoInfo(drawerTag,7424);
          renderLabel('jhn');
        }
        fetchData();
      }, [drawerTag]);

      // All Accesible Geo List
      const getGeoInfo = async (drawerTag, gpID) =>{

        try{

            const response = await fetch("https://hello2/Models/get_pl_data.php?gpID="+gpID+"&drawerTag="+drawerTag);
            
            const userData = await response.json();

            const geoList = userData.geo_list;
            const plList = userData.plList;
            const plinfo = userData.plDetails;

            setGeoList(geoList); //set Geo List 
            setValueGeo(geoList[0]["MARKET_NAME"]); // Set Selected Value
            setPlList(plList);
            setValuePl(plList[0]["PL_LIST"]);
            setplDetailsInfo(plinfo[0]);

            console.log(plList[0]["PL_LIST"]+"PLH11");

            console.log(geoList[0]["MARKET_NAME"]+"GEO11");
            console.log(plinfo[0]);

        }
        catch(error){

            console.log(error);

        }
      };



      // Label of the Select Box
      const renderLabel =  (selectTitle) => {

        console.log("Label dropdown");
        
          return (
            <Text style={[styles.label, {color: 'white'} ]}>
              {selectTitle}
            </Text>
          );

      };

      const renderPlList =  (plList) => {  

        console.log("PL dropdown");

        if(plList && plList.length){
          return(
            <View style={styles.container}>
              {renderLabel("PL List")}
              <Dropdown
                style={[styles.dropdown, isFocus && { borderColor: 'white' }]}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                inputSearchStyle={styles.inputSearchStyle}
                iconStyle={styles.iconStyle}
                data={plList}
                search
                maxHeight={300}
                labelField="PL_LIST"
                valueField="PL_LIST"
                placeholder={plList[0]["PL_LIST"]}
                searchPlaceholder="Search..."
                value={plList}
                onFocus={() => setIsFocus(true)}
                onBlur={() => setIsFocus(false)}
                onChange={item => {
                  setValueGeo(item.PL_LIST);
                  setIsFocus(false);
                }}
                renderLeftIcon={() => (
                  <AntDesign
                    style={styles.icon}
                    color={isFocus ? '#19AAF8' : 'white'}
                    name="Safety"
                    size={20}
                  />
                )}
              />
            </View>
            
          );
        }
        else{
          return(
            <View style={styles.container}>
              <Text style={styles.errorMsg}>No PL Info</Text>
            </View>
          );
        }
      };

    const renderPLDetails = (plDetails) => {

      console.log(plDetails+"Hello 1");
      if (plDetails && plDetails.length) {
      
      const tableDetails =  {

        tableHead: ['DATE', 'LAST HOUR', 'CUM HOUR'],
        tableData: [
            [plDetails["D0"], plDetails["PL_HITS_LH"], plDetails["PL_HITS_CUM"]],
            [plDetails["D1"], plDetails["PL_HITS_LH_D1"], plDetails["PL_HITS_CUM_D1"]],
            [plDetails["D2"], plDetails["PL_HITS_LH_D2"], plDetails["PL_HITS_CUM_D2"]],
            [plDetails["D7"], plDetails["PL_HITS_LH_D7"], plDetails["PL_HITS_CUM_D7"]],
        ],
      };


    console.log(tableDetails);

      return (
        <View style={styles.containerTable}>
                <Table borderStyle={{ borderWidth: 4, borderColor: 'teal' }}>
                    <Row data={DataTable.tableHead} style={styles.headTable} textStyle={styles.headText} />
                    <Rows data={DataTable.tableData} textStyle={styles.textTable} />
                </Table>
        </View>
      );
    }
    else{
      return(
        <View style={styles.container}>
          <Text style={styles.errorMsg}>No Table Info</Text>
        </View>
      );
    }

    };

    if (geoList && geoList.length) {
      return(
        <ScrollView style={styles.mainContainer}>
            <View style={styles.container}>
              {renderLabel(dropDownLabel+" List")}
              <Dropdown
                style={[styles.dropdown, isFocus && { borderColor: 'white' }]}
                placeholderStyle={styles.placeholderStyle}
                selectedTextStyle={styles.selectedTextStyle}
                inputSearchStyle={styles.inputSearchStyle}
                iconStyle={styles.iconStyle}
                data={geoList}
                search
                maxHeight={300}
                labelField="MARKET_NAME"
                valueField="MARKET_NAME"
                placeholder={geoList[0]["MARKET_NAME"]}
                searchPlaceholder="Search..."
                value={geoList}
                onFocus={() => setIsFocus(true)}
                onBlur={() => setIsFocus(false)}
                onChange={item => {
                  
                  setValueGeo(item.MARKET_NAME);
                  // setIsFocus(false);
                }}
                renderLeftIcon={() => (
                  <AntDesign
                    style={styles.icon}
                    color={isFocus ? '#19AAF8' : 'white'}
                    name="Safety"
                    size={20}
                  />
                )}
              />
            </View>   
            {renderPlList(plList)}
            {renderPLDetails(plDetailsInfo)}
        </ScrollView>
        );
      }
      else{
        return(
          <View style={styles.container}>
            <Text style={styles.errorMsg}>No Geo Info</Text>
          </View>
        );
      }
    }

问题是,每次我运行应用程序时,除了getGeoInfo()之外,所有的常量都自动运行。我想在getGeoInfo()运行后逐个加载const,
此外,当我专注于下拉页面是自动提交,并再次所有的常量运行。有人能帮我吗?

jtw3ybtb

jtw3ybtb1#

你的问题不是很清楚,但改变你的useEffect像这样:

useEffect(() => {
    const fetchData = async() => {
      await getGeoInfo(drawerTag,7424);
      renderLabel('jhn');
    }
    fetchData();
  }, [drawerTag]);

相关问题