如有需要，可以在Github上查看該專案的當前代碼
I've ran into an issue with my current React/TypeScript project, a cocktail recipe viewer, where the ingredients list will not show up initially when a drink is selected; 但是，在選擇第二杯飲料后，成分串列會按預期顯示。
初始搜索期間未顯示成分的螢屏截圖
選擇第二杯飲品后正確顯示成分的螢屏截圖
技術細節：
雞尾酒資料從TheCocktailDB 的免費 API中獲取并分配給“資料”狀態。When a specific drink is selected it is set to a "drink" state. 飲料的照片、成分、配方和如何制作飲料的說明顯示在模態彈出視窗中。
每次選擇一種飲料時，我使用 useEffect 運行兩個函式來決議所選飲料的成分和測量值：
useEffect(() => {
getIngredients(drink);
getMeasurements(drink); }, [drink]);
getIngredients 和 getMeasurements 函式類似：
const getIngredients = (drink: IDrinkProps) => {
/*Each drink object has the properties strIngredient1 through strIngredient15
this checks each property to determine if it's a string and checks that it's not an empty string, if it passes
those two conditions then it is pushed to the filteredIngredients array and displayed in the modal popup for the drink the user selects.*/
for (let i = 0; i <= 14; i ) {
//Checks that the current ingredient is a string, if not the message is console logged
if (typeof drink[`strIngredient${i}`] !== "string") {
console.log(typeof drink[`strIngredient${i}`], "Detected");
//Checks if the current ingredient is an empty string if so the message is console logged
} else if (drink[`strIngredient${i}`] === "") {
console.log("Empty string detected");
} else {
//If the checks above pass the ingredient is pushed to the filteredIngredients array
filteredIngredients.push(drink[`strIngredient${i}`]);
}
//Once the for loop finishes the filteredIngredients array is set to the ingredients state and displayed in the modal pop-up
setIngredients(filteredIngredients);
}};
getMeasurements 函式運行第三個函式，getExactRecipe 在它的結論：
const getMeasurements = (drink: IDrinkProps) => {
for (let i = 0; i <= 14; i ) {
//Checks that the current measurement is a string, if not the message is console logged
if (typeof drink[`strMeasure${i}`] !== "string") {
console.log(typeof drink[`strMeasure${i}`], "Detected");
//Checks if the current measurement is an empty string if so the message is console logged
} else if (drink[`strMeasure${i}`] === "") {
console.log("Empty string detected");
} else {
//If the checks above pass the measurement is pushed to the filteredMeasurements array
filteredMeasurements.push(drink[`strMeasure${i}`]);
}
//Once the for loop finishes the filteredMeasurements array is set to the measurements state and displayed in the modal pop-up
}
setMeasurements(filteredMeasurements);
getExactRecipe(ingredients, measurements); };
getExactRecipe 函式將成分與它們各自的測量值結合起來，以在模式彈出視窗中顯示：
const getExactRecipe = (
ingredients: (string | undefined)[],
measurements: (string | undefined)[]
) => {
let exactArray: string[] = [];
if (ingredients.length > 0) {
for (let i = 0; i < filteredIngredients.length; i ) {
if (
`${filteredIngredients[i]}` === "undefined" ||
`${measurements[i]}` === "undefined"
) {
//Do nothing
} else {
exactArray.push(`${filteredIngredients[i]} ${measurements[i]}`);
setExactRecipe(exactArray);
}
}
}
};
我不確定這個問題是否與 useEffect 陳述句或 getExactRecipe 函式有關。或者如果它是由另一個未知的罪魁禍首引起的。非常感謝任何幫助，因為這讓我發瘋了！
uj5u.com熱心網友回復：
我沒有檢查你的整個代碼，因為你真的應該試著把你的問題濃縮成一個更小的例子，但我猜你的問題是......
useEffect(() => {
getIngredients(drink);
getMeasurements(drink);
}, [drink]);
...
const getIngredients = (drink: IDrinkProps) => {
...
setIngredients(filteredIngredients);
};
...
const getMeasurements = (drink: IDrinkProps) => {
...
getExactRecipe(ingredients, measurements);
};
您正在使用與呼叫ingredients相同的useEffect塊setIngredients。我猜你希望使用新設定的值，但這不是鉤子的作業方式。這意味著您的getMeasurements函式仍在使用以前的ingredients值。
另請注意，您在使用setMeasurementsand時也犯了同樣的錯誤measurements。
對此的替代方法是將useEffectin 分成 2 個單獨的塊。
useEffect(() => {
... // Ingredients
}, [drink]);
useEffect(() => {
... // Measurements
}, [drink, ingredients]); // Note: that this second useEffect also depends on ingredients!
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497481.html
標籤：javascript 反应 打字稿 用户界面 顺风CSS
上一篇：單擊按鈕時顫動會改變顏色