这是我的代码：
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() 之外，所有 const 都会自动运行。我想在 getGeoInfo() 运行后一一加载 const，
而且，当我专注于下拉页面时，会自动提交并再次运行所有常量。有谁可以帮助我吗？
你的问题不是很清楚，但是 像这样改变你的 useEffect ：
useEffect(() => {
const fetchData = async() => {
await getGeoInfo(drawerTag,7424);
renderLabel('jhn');
}
fetchData();
}, [drawerTag]);