我正在嘗試根據用戶輸入執行簡單的添加（對于以立方米為單位的盒子的尺寸......我想總結他們想要添加的所有盒子）。
const totalW = []
const cubitMeters = (parseInt(height) * parseInt(width) * parseInt(length) * parseInt(count)) / 1000000
totalW.push(cubitMeters)
然后在 JSX 中我正在減少它
<Text>
{totalW?.reduce((a, b) => a b, 0).toFixed(2)}
</Text>
一切都很好，但是正如您所看到的那樣，計算cubitMeters是乘法......除非提供了所有數字，否則它會回傳 NaN。只有當用戶最終輸入所有數字時它才能正常作業，這并不理想。
如何確保僅在輸入所有數字時觸發該功能？
uj5u.com熱心網友回復：
嘗試添加 if 陳述句
if (totalW.length === 0) {
return
} else {
///return your totalW value
}
否則，構建一個異步函式來進行計算并等待結果。這可能有效
const calculationFunction = async (err, response) => {
let totalW = [];
let calculation =
(parseInt(height) * parseInt(width) * parseInt(length) * parseInt(count)) /
1000000;
if (calculation.length !== 0) {
let cubitMeters = calculation;
totalW.push(cubitMeters);
} else {
console.log("Not ready yet...");
}
};
const answer = await calculationFunction();然后這樣做：
if (answer.length > 0) {
<Text>{answer?.reduce((a, b) => a b, 0).toFixed(2)}</Text>;
} else {
console.log("Still calculating...");
}
uj5u.com熱心網友回復：
你能提供一個完整的用例嗎？根據提供的資訊，很難完全理解如何提供幫助。在使用 useState 存盤一個輸入或多個輸入的場景中，您可以簡單地使用輸入欄位上的 onChange 事件對其進行驗證。如果您有兩個或多個狀態，您可以在插入最后一個數字后使用它來觸發該功能。
前任：
- 用戶在輸入中插入第一個數字，插入空格或逗號，然后插入另一個數字：您可以在分隔符處拆分，然后使用 te 拆分的結果繼續操作。
- 用戶提供第一個輸入；用戶提供第二個輸入；在插入并驗證第二個值后觸發該函式。
uj5u.com熱心網友回復：
好了朋友們！非常感謝您花時間幫助我。對此，我真的非常感激。與您交談后，有些事情開始敲響，我終于想出了一個解決方案。
{totalW
.filter((nan) => nan)
.reduce((a, b) => a b, 0)
.toFixed(2)}
這個函式基本上過濾掉所有虛假值（顯然 NaN 是一個虛假值）.. 一旦我弄清楚了，它就是小菜一碟
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/529496.html
標籤：javascript反应