如何在由 onSubmit 調用的函數內使用狀態？

Question

我在使用由 redux-form 的 Form 組件的 onSubmit 調用的函數內的 state 時遇到問題。

我需要訪問給定的狀態、選項卡和 currentTab。 第一個是選項卡數組，第二個是指示用戶當前所在的選項卡。

我試過使用點擊事件來處理提交，一切正常。

將狀態作為參數傳遞不起作用。 例如

<Form onSubmit={() => submit(currentTab, tabs.length)}>
  ...
</Form>

它仍然使用默認狀態 0。

我也試過使用給裝飾組件的 handleSubmit 道具，但沒有成功。

問題是當提交事件發生時，函數內部的狀態與實際狀態不一致。

const [tabs, setTabs] = useState([])
const [currentTab, setCurrentTab] = useState(0)
console.log('outside', tabs.length); // outside 2
const submit = () => { 
  console.log('inside', tabs.length); /* inside 0  <- still the 
  default value provided to useState */
  if (tabs.length == currentTab + 1) {
    props.onSubmit();
  } else {
    handleNextTab();
  }
};
<Form onSubmit={submit}>
  ...
</Form>

由於選項卡是動態的並且長度可以變化，我希望能夠將 tabs.length 與 currentTab 進行比較，以了解用戶是否在最后一個選項卡中以根據結果觸發不同的操作。

Answer 1

如果在呈現Form時狀態為真，您可以咖喱onSubmit處理程序，並將狀態傳遞給處理程序。

我在想：

<Form onSubmit={handleSubmit(tabs, currentTab)}>
  ...
</Form>

和：

const handleSubmit = (tabs, currentTab) => {
    return () => {
        // Do something with `tabs`, and `currentTab` here
    };
};

另見（相關）： https : //reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changed-value-from-usecallback

Answer 2

您需要將選項卡作為參數傳遞給您的提交函數。