javascript - 如何在 onSubmit 调用的函数内使用状态？

Question

我在使用 redux-form 的 Form 组件的 onSubmit 调用的函数内的状态时遇到问题。

我需要访问给定的状态、选项卡和当前选项卡。第一个是选项卡数组，第二个是用户当前所在选项卡的指示器。

我尝试使用点击事件来处理提交，一切正常。

将状态作为参数传递不起作用。例如

<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 时状态为 true，您可以柯里化(Currying) 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-changing-value-from-usecallback